Jump to content
mruoppolo

Colocar um fade na div que aparece em overlay

Recommended Posts

Olá, tudo bem?

 

Estou criando um site de portfólios e criei um mansonry em que a imagem, quando esta em estado hover, aparece uma div sobre ela, fazendo um overlay. Segue o meu código: https://jsfiddle.net/mruoppolo/6yb9w4jf/ Ele até adiciona a classe transition no estado hover, porém o fade não acontece.

 

Saberia me explicar o motivo??

 

Obrigado :D

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By danicarla
      Bom dia pessoal,

      Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual
      Meu codigo está assim:
      <style type="text/css"> a.ChamadaNoticias:link{text-decoration:none;} a.ChamadaNoticias:visited{text-decoration:none;} a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;} .tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;} .textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;} </style> <a href="#" class="ChamadaNoticias"> <div class="tituloA">Titulo da noticia</div> <div class="textoB">Aqui vai uma breve descrição da noticia</div> </a> Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?
    • By ThosuZ
      Olá, pessoal. Tudo bom? Estou com um problema aqui. Criei uns links em um site pra levarem pra uma galeria, são imagens que estão lado a lado, cada uma com a imagem principal de cada galeria. O problema é: eu criei elas como background de li's de uma ul. Coloquei um <span> dentro da tag <li> pra poder aparecer o nome da galeria quando passar o mouse por cima. Observem o código:
       
      HTML:
       
      <ul id="artefotos">                 <a href="lorena.html" target="_self" class="glink"><li id="ft01"><span>Lorena Frazzão</span></li></a>                 <a href="vivian.html" target="_self" class="glink"><li id="ft02"><span>Vivian Nadine</span></li></a>                 <a href="paula.html" target="_self" class="glink"><li id="ft03"><span>Paula Bernardes</span></li></a>                 <a href="anaclara.html" target="_self" class="glink"><li id="ft04"><span>Ana Clara</span></li></a>                 <a href="marcus.html" target="_self" class="glink"><li id="ft05"><span>Marcus Visasi</span></li></a>                 <a href="davi.html" target="_self" class="glink"><li id="ft06"><span>Davi Serrano</span></li></a>                 <a href="rafaejr.html" target="_self" class="glink"><li id="ft07"><span>Rafaela & Jr</span></li></a>             </ul>  
      CSS:
       
      ul#artefotos li span {     font-size: 15pt;     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);     line-height: 1120px;     padding: 10px;     opacity: 0;     transition: 0.5s; }   ul#artefotos li:hover span {     opacity: 1;     background-color: rgba(0, 0, 0, 0.5); }   a.glink {     color: #fff; }   ul#artefotos {     width: 1470px;     margin: 0 auto;     margin-top: -20px;     padding: 25px;     overflow: hidden;     list-style: none; }   ul#artefotos li {     float: left;     width: 200px;     height: 600px;     margin: 5px;     background-color: #363636;     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }   ul#artefotos li#ft01 {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px; }   ul#artefotos li#ft01:hover {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px;     filter: opacity(25%); }  
      Porém, na última seção do CSS, eu coloquei um :hover pra quando passar o mouse, o fundo ficar menos opaco e a tipografia mais legível. Mas a tipografia também ficou menos opaca, já tentei colocar esse :hover no span como background: rgba(0,0,0,0.5); mas também não deu certo, porque ele fica apenas um retângulo em volta dele.
       
      Alguém sabe como resolver pra deixar toda a imagem menos opaca e a tipografia normal quando passar o mouse?
       
      Valeu!

    • By pheureunanda
      Olá, sou nova no fórum e na área de programação web, estou me dedicando a aprender tudo sozinha, só que há uma dúvida minha que eu quebro cabeça até hoje para resolvê-lá, mas até agora não consegui. É que eu quero saber como se centraliza e alinha as áreas de sidebar e post como nessas imagens que eu fiz de exemplo: 
      Como eu faço para deixa-las centralizadas e alinhadas uma do lado da outra com a distância que eu determinar? 
       
      E na primeira imagem de exemplo: como eu faço para deixar a área de sidebar dividida em blocos de tamanhos iguais um embaixo do outro? 
       
      Se alguém puder me ajudar... Estou recorrendo a esse fórum. 
    • By julianaparra
      Eu acho que posso estar errando no CSS, quando minimizo a pag as div cortam e a imagem de cima também, elas não ficam proporcionais.
      Esse é meu código, sei não esta responsivo, acho que tem mais div do que deveria, mas se tiro alguma ele buga. 
       
      Eu não consigo anexar as fotos para mostrar e o site ainda não esta no ar. http://julianaparra-dev.com/
       
      HTML
      <!DOCTYPE html> <html lang="pt-BR">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <link rel="stylesheet" href="./css/main.css">     <title>Juliana Parra</title> </head>   <body>     <header class="menu-principal">         <main>             <div class="header-1">                 <div class="logo">                     <a href="index.html">                         <img src="./img/logo.png" />                     </a>                 </div>                 <div class="links">                     <div class="menu">                         <nav>                             <ul>                                 <li><a href="index.html">Início</a></li>                                 <li><a href="sobre.html">Sobre</a></li>                                 <li><a href="portifolio.html">Portifolio</a></li>                                 <li><a href="contato.html">contato</a></li>                             </ul>                         </nav>                     </div>                     <ul class="redes-sociais">                         <li><a href="https://github.com/Parrajuliana" target="_blank"><img src="./img/github.png"                                     alt="Meu github"></a></li>                         <li><a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank"><img                                     src="./img/linkedin.png" alt="Meu linkedIn"></a></li>                     </ul>                 </div>             </div>         </main>     </header>     <div class="header-2">         <div class="imagem-fundo"></div>         <div class="container"></div>           <div class="imagem-miolo">             <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">         </div>     </div>     <div>         <div class="texto">             <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>                 Dolore ullam ratione numquam repellendus enim, reprehenderit molestias,                 excepturi tempore nemo porro vel sequi ea quisquam velit sunt?                 Recusandae quidem aperiam tenetur.</p>             <div class="botao">                 <a class="bt bt-lj" href="sobre.html"><strong>saiba mais</strong></a>             </div>         </div>     </div>     <footer>         <div class="rodape">             <main>                 <div class="direitos-reservados">                     2019 Todos os Direitos Reservados                 </div>             </main>         </div>     </footer> </body>   </html>     //CSS   body {     font-family: 'Open Sans', sans-serif;        width: 100%;     height: 100%;     margin: 0 auto;        } .menu-principal {     background-color: #252323;     height: 68px;     width: 100%;             } main {     margin: 0 auto;     width: 980px;         position: relative; } .logo {     float: left;     padding: 10px;     width: 30%; } .links ul li {     margin-left: 20px;     display: inline-block;     float: left;     list-style: none; } .links{     padding: 10px;     width: 65%;     float: left; } .menu ul li a {     padding: 10px;     color: #8b8b8b;     text-decoration: none;     font-size: 16px;     text-transform: uppercase; } .menu ul li a:hover{     color: #00bac6; } .slick-initialized {     overflow: hidden; } .imagem-fundo {     background-image: url(/img/imagem_home.png);     width: 100%;       height: 400px;      background-repeat: no-repeat;        } .container {        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00aa9b+8,2989d8+45,207cca+52,00ba3a+100 */ background: #00aa9b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #00aa9b 8%, #2989d8 45%, #207cca 52%, #00ba3a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa9b', endColorstr='#00ba3a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */     display: block;     width: 100%;       height: 30px; }   .imagem-bolinhas{     width: 1080px;     position: relative;       left: 250px;         top: 20px;              height: 300px;           background-repeat: no-repeat;       size: cover;   } .texto {     text-align: center;         width: 600px;     height: 300px;      font-size: 25px;       padding: 20px;        position:relative;     top:20%;     left:30%;      }   .bt {          text-decoration:none;            font-size: 15px;         color:white;         padding: 10px 20px;         background: -moz-linear-gradient(             top,             #0083ab 0%,             #00ba3b);         background: -webkit-gradient(             linear, left top, left bottom,             from(#0083ab),             to(#00ba3b));                 border-radius: 10px;         border: 1px solid;         -moz-box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);         -webkit-box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);         box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);     }   .rodape {     color: #c1c1c1;     background-color: #252323;     height: 60px;     width: 100%;       } .direitos-reservados {     padding: 20px;     width: 60%;     float: right;     }
    • By lucas9
      Com base nos conceitos de reutilização de código e flexibilidade, você deve planejar uma classe de faturamento com o método faturar. Lembre-se que não é permitido reescrever métodos; no entanto, deve ser considerado que cada perfil de cliente tem uma regra de faturamento diferente. Veja:
      Cliente pessoa física recebe um desconto de 15% e tem 30 dias para pagar. Cliente pessoa jurídica recebe um desconto de 20% e tem 60 dias para pagar. Cliente governo não recebe desconto e deve pagar à vista. Use os comandos try e catch para tratar as possíveis exceções (por exemplo, tentar ler mais clientes do que existem).
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.