Jump to content
ThosuZ

Problema para colocar filtro no background

Recommended Posts

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!

asd.png

Share this post


Link to post
Share on other sites

@ThosuZ
Se a imagem for de fundo não há como controlar a opacidade do texto.
Coloque a imagem na HTML e altere as CSS como mostrado a seguir:
HTML

<ul id="artefotos">
  <li><a href="lorena.html" target="_self"><img src="../_images/_essays/_lorena/IMG_2651.jpg" alt="Lorena Frazzão"><span>Lorena Frazzão</span></li></a>
  <li><a href="vivian.html" target="_self"><img src="..." alt="Vivian Nadine"><span>Vivian Nadine</span></li></a>
  <li><a href="paula.html" target="_self"><img src="..." alt="Paula Bernardes"><span>Paula Bernardes</span></li></a>
  <!-- outros links -->
</ul>

CSS

#artefotos li {
  position: relative;
  width: 200px;
  float: left;
  list-style: none;
  margin-left: 10px;
}
#artefotos li span {
  position: absolute;
  left: 0;
  bottom: 10px;
  color: #fff;
  background: black;
  font-size: 21px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  padding: 10px;
  opacity: 0;
  transition: 0.5s;
}
#artefotos li:hover span {
  opacity: 1;
}
#artefotos li:hover img {
  opacity: 0.7;
  transition: 0.5s;
}

Nota: É necessário que as imagens tenham dimensões 200px x 600px

Share this post


Link to post
Share on other sites
8 hours ago, Maujor said:

@ThosuZ
Se a imagem for de fundo não há como controlar a opacidade do texto.
Coloque a imagem na HTML e altere as CSS como mostrado a seguir:
HTML


<ul id="artefotos">
  <li><a href="lorena.html" target="_self"><img src="../_images/_essays/_lorena/IMG_2651.jpg" alt="Lorena Frazzão"><span>Lorena Frazzão</span></li></a>
  <li><a href="vivian.html" target="_self"><img src="..." alt="Vivian Nadine"><span>Vivian Nadine</span></li></a>
  <li><a href="paula.html" target="_self"><img src="..." alt="Paula Bernardes"><span>Paula Bernardes</span></li></a>
  <!-- outros links -->
</ul>

CSS


#artefotos li {
  position: relative;
  width: 200px;
  float: left;
  list-style: none;
  margin-left: 10px;
}
#artefotos li span {
  position: absolute;
  left: 0;
  bottom: 10px;
  color: #fff;
  background: black;
  font-size: 21px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  padding: 10px;
  opacity: 0;
  transition: 0.5s;
}
#artefotos li:hover span {
  opacity: 1;
}
#artefotos li:hover img {
  opacity: 0.7;
  transition: 0.5s;
}

Nota: É necessário que as imagens tenham dimensões 200px x 600px

 

 

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!

Share this post


Link to post
Share on other sites

@ThosuZ
Como você é novo no fórum vou te passar uma dica de postagem:
1-) Ao postar respostas você não precisa citar todo o texto e códigos daquele a quem está respondendo.
Basta usar @Nome para quem é dirigido seu poste

Por exemplo: na sua resposta para mim não precisava repetir o meu código. Bastava escrever o seguinte:
@Maujor
Eu tinha pensado em fazer dessa forma, mas eu...etc...

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 vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • 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 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. 
×

Important Information

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