Problema para colocar filtro no background

[ThosuZ 0]

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!

[Omar~ 87]

Usar o atributo title não seira o bastante?

<li title="Olá mundo"></li>

[Maujor 144]

@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

[ThosuZ 0]

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!

[Maujor 144]

@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...