Ir ao conteúdo
  • Cadastre-se
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>

 

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×