CSS css de classes no codigo

Brunobarreto02 · 15 de janeiro de 2018

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 Letraset 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>

Felipe Paz · 15 de janeiro de 2018

@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/