Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Brunobarreto02

CSS css de classes no codigo

Recommended Posts

 

Estou programando e treinando HTML nessa página, porém estou com uma dúvida no CSS porém nas class  figure.foto-legenda figcaption e  figure.foto-legenda:hover,  a atributo opacity não estão funcionando, que funcionaria como um fade-in e fade-out. Como resolver isso?

 

 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="Ansi">
    <style>
    p {
        text-align: center;
       }
       body{
         background-color: #6513;
      color:   rgba(0,0,0,0.5);
         /*meu ******/
         }  
      
      figure.foto-legenda{
        border: 8px solid white;
        box-shadow: 1px 1px 4px black;
        position:relative;
        
      }
      figure.foto-legenda img{
        width: 40%;
        height: 30%;
        
      }
      figure.foto-legenda figcaption{
        opacity: 0%;
        position: absolute;
        top: 0px; 
        background-color: rgba(0,0,0,.5);
        color: white;
        width:100%;
        height:100%;
        padding: 10px;
        box-sizing: border-box;
        transition: opacity 1s;
        
        
      }
      figure.foto-legenda:hover figcaption{
        opacity: 1;
        
      }
      
      nav#menu{
        
        display: block;
      }
      nav#menu li{
        list-style:none;
        text-transform: uppercase;
        display: inline-block;
        background-color: #2156;
        color: white;
        padding: 10px;
        margin: 2px;
        top: -20px;
        left: 100px;
      } 
    </style>
    <script src="script.js">
     
    </script>
   
    
    <title>minha página</title>
  </head>
  
  <body>
    <script>
    alert("Bem vindo a jobs software");
    </script>
<div>
    
  
  <header>
    <nav id="menu">
  <li>Inicio</li>
    <li>contatos</li>
    <li>Quem somos</li>
    <li>Metas da empresa</li>
    <li>projetos</li>
      </nav>
  </header>
  <hgroup>
  <h1>
    Bem vindo a Empreza Jobs software
  </h1>
  <h2>
    uma filial dos irmaos elmers 
  </h2>
  <h3>
    leia o texto de boas vindas
  </h3>
  </hgroup>
  <figure class="foto-legenda">
  <img src="https://blog.pmweb.com.br/wp-content/uploads/boas-vindas-email.jpg" width= 300>
  <figcaption>
    <h3>
      nossa mensagem de boas vindas
    </h3>
    <p>
      <h4>
        o melhor serviço em desenvolvimento de programas
    </h4>
    </p>
    </figcaption>
  </figure>
  <h2>
    
   <p>
     
     <i>O que é Lorem Ipsum?</i></h2>
Lorem Ipsum é simplesmente uma simulação de texto da indústria 
  tipográfica e de impressos, e vem sendo utilizado desde o 
  século XVI, quando um impressor desconhecido pegou uma bandeja de 
  tipos e os embaralhou para fazer um livro de modelos de tipos. 
  Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto 
  para a editoração ele<wbr>trô<wbr>nica, permanecendo essencialmente inalterado. 
  Se popularizou na década de 60, quando a Letra­set lançou decalques contendo 
  passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a 
  programas de editoração eletrônica como Aldus PageMaker.
 
  </p>
    
      <h3>
        
    simbolos especiais
    </h3>
    €
    £
    &dollar;
    ≥
    √
    <p>
      essa é a era de ouro da nova tecnologia. Logo logo serãp lançadas no espaço
      grandes naves para colonizar novos planetas. x<sup>2</sup>+14x+log<sub>3</sub>70
    </p>
    
  </div>
  </body>
</html>

 

Editado por DiF
Usar o botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Brunobarreto02 teu atributo opacity está definido errado. Esse atributo vai de 0 a 1, portanto, 0.1, 0.2, 0.3, 0.4 ... e não se utiliza % nele.

 

figure.foto-legenda figcaption{
   opacity: 0;
   position: absolute;
   top: 0px; 
   background-color: rgba(0,0,0,.5);
   color: white;
   width:100%;
   height:100%;
   padding: 10px;
   box-sizing: border-box;
   transition: opacity 1s;  
}

E mais uma dica, pelas boas práticas, quando algum valor é setado como 0, no css, não se utiliza o sufixo indicativo do atributo. Por exemplo, a margin da div é: margin: 10px 0 e não margin: 10px 0px. Ou margin: 10% 0 e não margin: 10% 0%. Não que isso vai implicar em algum erro, apenas convenções mesmo. Já no teu caso deu errado porque o atributo opacity utiliza apenas números entre 0 e 1. Testa aí e me fala depois.

 

Você pode ver o resultado aqui https://jsfiddle.net/hyfs3jnc/

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×