Executando verificação de segurança...
1
JVitor
1 min de leitura ·

Estou com um problema de CSS e não consigo resolver

#Olá, como estão?#

Sou iniciante e estou tentando realizar uma transição hover, mas não consigo identificar o problema.

O texto está ficando com transparencia juntamente com o background, porém eu gostaria de apenas o background em transparencia. Conseguem me ajudar?

HTML

    <div class="content">

        <div class="gallery">
            <div class="card-photo foto1">
                <div class="text-container">
                    <div class="text">
                        <span>Batman</span>
                    </div>
                </div>
            </div>

CSS
.photos-container {
width: 80%;
height: 800px;
padding-top: 50px;
display: flex;
justify-content: center;
margin: 0 auto;
color: #fff;
font-family: 'Kdam Thmor Pro', sans-serif;
}

.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
}

.card-photo {
width: 400px;
height: 200px;
display: flex;
background-position: 50% 50%;
background-size: cover;
cursor: pointer;
transition: 1s;
}

.card-photo:hover {
transform: scale(1.02);
}

.text-container {
width: 100%;
height: auto;
opacity: 0;
padding: 5px;
background-color: black;
}

.text-container:hover {
opacity: 30%;
}

.text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.foto1 {
background-image: url(/images/foto1.png);
}

OBS: Também não estou conseguindo postar o código de maneira adequada, se me auxiliarem, forneço corretamente. Grato!
Carregando publicação patrocinada...
3
alissonsuassuna

Opa tenta fazer assim oh

<html>
    <head>
        <style>
            div {
              background-color: #4CAF50;
              padding: 10px;
            }

            div.first {
              opacity: 0.1;
            }

            div.second {
              opacity: 0.3;
            }

            div.third {
              opacity: 0.6;
            }
        </style>
    </head>
    
    <body>
        <h1>Jesus é Bom</h1>
        <p>Espero que lhe ajude =D</p>

        <div class="first"><p>opacity 0.1</p></div>
        <div class="second"><p>opacity 0.3</p></div>
        <div class="third"><p>opacity 0.6</p></div>
        <div><p>opacity 1 (default)</p></div>

    </body>
    <p>By TipsCode =D </p>
</html>
3
GabrielSozinho

Um bloco de código pode ser escrito entre ```(3 crases) da seguinte forma:

```python
idade = int(input("Qual sua idade? "))
print("Maior de idade" if idade >= 18 else "Menor de idade")
```

Nesse caso você pode especificar ou não a linguagem de programação no topo para colorir termos de sintaxe.

idade = int(input("Qual sua idade? "))
print("Maior de idade" if idade >= 18 else "Menor de idade")
1
oCarlos

As crianças herdam a opacidade. Seria estranho e inconveniente se não o fizessem.

Você pode usar um arquivo PNG translúcido para sua imagem de plano de fundo ou usar uma cor RGBa (a para alfa) para sua cor de plano de fundo.

Exemplo, 50% de fundo preto desbotado:

Text added.

creditos: stackoverfl

1
petrusnoleto

Existem varias formas de fazer isso a mais simples: na class(.text-container) em vez de black voce ultilizar o codico hexadeximal (#000000) e no hover background-color: #00000000; obs:remova o opacity.

1
hurick

Oi, @JVitor, tudo bem?

Cara, pelo que eu vi, você tá aplicando a propierdade opacity: 30% na tua classe .text-container, que é o que está com a cor do fundo e o texto em si, certo?

Nessa situação, caso queira que apenas o seu fundo tenha uma opacidade, sugiro trocar a propriedade por:

.text-container:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

Faz um teste e me diz aí se funcionou 😊