@Jorggyh
Posted
Boa tarde brother, beleza?
Sobre o efeito hover, não sei se é a única maneira, mas eu fiz da seguinte forma, no html, antes da tag img eu adicionei o seguinte:
<div class="overlay">
<img alt="Eye view icon" src="img/icon-view.svg" />
</div>
E no CSS eu adicionei:
.overlay {
position: absolute;
background-color: rgba(0, 255, 247, 0.6);
width: 30rem;
height: 30rem;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.15s ease-in-out;
}
/* define o tamanho do ícone do olho */
.overlay img {
height: 4rem;
width: 4rem;
}
.overlay:hover {
cursor: pointer;
opacity: 1;
}
Explicação: esse overlay está sobrepondo a imagem, estão no mesmo lugar, isso isso com o position: absolute
, mas ele não está aparecendo, porque está com opacidade 0, quando passo o mouse aí a opacidade muda para 1, aparecendo o overlay, a transparência eu consegui com rgba, que permite colocar transparência.
Tenta adaptar no seu código, depois me fala se deu certo, ou se não deu.
Marked as helpful
@gleidsonfagno
Posted
@Jorggyh valeu mano