Jump to content

ThosuZ

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Comum

About ThosuZ

  1. ThosuZ

    Problema para colocar filtro no background

    Eu tinha pensado em fazer dessa forma, mas eu preferi background pra ter um controle maior das dimensões das imagens... mas já que é a única solução, vou usar <img>, e como já defini o tamanho que quero, vou cortar as imagens com essas dimensões. Valeu!
  2. 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!
×

Important Information

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