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 wsoalves
      Olá, eu estava mexendo em um Tema Wordpress, e no final do menu tem alguns ícones de social mídia que posso trocar selecionando em um biblioteca interna.
      Mas não tem o ícone do whatsapp para eu escolher
       
      Queria saber se tem alguma forma de trocar ícones assim no editor CSS colocando o Fontawesome no lugar por exemplo "<i class="fab fa-whatsapp"></i>"
       
      Obrigado!
    • By laloproces
      Boa noite. Estou estudo POO com PHP e fiz uma classe Pen.php. Inclui um echo com parágrafo nesse código que gostaria de alterar a cor da fonte de acordo com o atributo color da caneta. Pesquisei no Google e sugeriram fazer um arquivo php com as formatações, mas não obtive sucesso. Estou utilizando Apache como server local, última versão disponível do XAMPP. Mesma coisa para a versão do PHP. Segue o código dos arquivos:
       
      index.php
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" media="screen" href="style.php" /> <title>POO Lesson 02</title> </head> <body> <div> <label id="model"></label> </div> <?php require_once 'Pen.php'; $c1 = new Pen(); $c1->model = "bic"; $c1->color = "blue"; $c1->charge = 80; $c1->tip = 0.5; $c1->capped = false; $c2 = new Pen(); $c2->model = "faber-castell"; $c2->color = "red"; $c2->charge = 50; $c2->tip = 0.75; $c2->capped = true; print_r($c1); echo "<br>"; print_r($c2); $c1->scribble(); $c2->scribble(); ?> </body> </html> Pen.php
      <?php class Pen { var $model; var $color; var $tip; var $charge; var $capped; function scribble(){ if($this->capped == true){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is capped!</p>"; } else{ if($this->color=="blue"){ echo "<p style='color: blue;'>I'm scribbling with the pen ".$this->model." ".$this->color." ...</p>"; } else{ echo "<p id='c2'>I'm scribbling with the pen ".$this->model." ".$this->color." ...</p>"; } } } function cap(){ if($this->capped == true){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is already capped!</p>"; } else{ $this->capped = true; echo "<p>The pen ".$this->model." ".$this->color." is capped!</p>"; } } function uncap(){ if($this->capped == false){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is already uncapped!</p>"; } else{ $this->capped = false; echo "<p>The pen ".$this->model." ".$this->color." is uncapped!</p>"; } } } style.php
      <?php header("Content-type: text/css; charset: UTF-8"); require_once 'Pen.php'; $c0 = new Pen(); $color = $c0->color; ?> c2 { color: <?php echo $color; ?>; } <?php header("Content-type: text/css; charset: UTF-8"); require_once 'Pen.php'; $c0 = new Pen(); $color = $c0->color; ?> c2 { color: <?php echo $color; ?>; }  
    • By julianaparra
      Eu não estou conseguindo declarar um span com a pseudo-classe action.
      Estou declarando o span errado, pois ele não reconhece o comando action e hover :
      ( Ja tentei deixar só span, mas como esta dentro de um <p> ele também não reconhece, tiro o <p> ele faz a ação )

      Ja tentei declarar por:

      span:action
      span.destaque_glossario:action
      p.destaque_glossario
      span.destaque_glossario p:action
      e nada T.T

      Mas se eu declarar  .destaque:action
      ao clicar no texto ele aceita, mas eu gostaria que fosse apenas na palavra.
       
       
      div.glossario { background-color: #fdeae4; padding: 1em; border-radius: 10px; margin-left: auto; margin-right: auto; border-top: 3px solid #7e3e3b; max-width: 600px; margin-left: auto; margin-right: auto; position: absolute; top: 20%; left: 70%; display: none; }   div.glossario p { text-indent: 0; margin-top: 0; margin-bottom: 0; }   span.destaque_glossario { font-weight: bold; color: #3d8177; }   span.destaque_glossario:active + div.glossario { display: block; }  
      <body> <div class="destaque"> <p> Completa a coleção um caderno de gramática que atende a todos os anos do Fundamental II – do 6o ao 9o. Esse manual básico contém as principais normas referentes ao padrão linguístico, todas acompanhadas de exemplos correspondentes.trabalha interdisciplinaridade. <span class="destaque_glossario">Ética:</span> trabalha interdisciplinaridade. Seu conteúdo compreende cinco eixos temáticos: fonética, morfologia, sintaxe, semântica, estilística. </p> </div> <div class="glossario"> <p> <span class="destaque_glossario">Ética:</span> valores e modos de agir considerados como corretos </p> </div> </body>
    • By Luiz Felipi Barone
      Caros amigos,
       
      Sou novo na área e estou cursando técnico
       
      Para treinar resolvi atualizar um site de um jogo antigo. ( 2007  ).
       
      Primeiramente modifiquei banner's mudei algumas partes do layout's.
       
      E comecei configurar algumas coisas novas no site.
       
      A Ideia era adicionar um modal de cadastro porém quando adiciono o bootstrap a pagina fica inteira desconfigurada.
       
      Sem bootstrap inserido: https://imgur.com/d6Q65iA
      Com bootstrap inserido: https://imgur.com/HSUc628
       
      Alguém tem ideia do que poderia ser ?
       
      Grato, desde já !
    • By jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada com linhas curvas que circundam os tópicos da página, alguém saberia me dizer como é possível fazer essas linhas curvas numa página html ???
×

Important Information

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