Design comparison
Solution retrospective
Good colleagues, excuse me to see if you can help me with the :hover of the image, I had several complications to be able to put it and it is still not 100%, if you can help me I would greatly appreciate it.// Buenas compañeros, disculpen para ver si m pueden ayudar con el :hover de la imagen, tuve varias complicaciones para poder ponerlo y aun no esta al 100%, si m pueden ayudar se los agradecería mucho.
Community feedback
- @MaximilianoDanielGarciaPosted about 1 year ago
Hola Alex, buen trabajo!
Para solucionar tu problema con el estilo hover necesitas agregar
position: relative;
a tu clase.imgContainer
. Luego, realizar estos cambios:.imgContainer::before { top: 0; left: 0; } .imgContainer::after { top: 50%; left: 50%; }
Una vez apliques estos cambios funcionará como esperas.
Un elemento con
position: absolute;
se posiciona en relación con el ancestro conposition: relative;
más cercano, en tu caso al no especificarle uno estaba tomando como ancestro albody
. Para más información al respecto te sugiero visitar w3schools.Espero te haya ayudado.
Marked as helpful1 - @SuperJulia2024Posted about 1 year ago
Hola Alex,
Yo he creado un container que tiene como imagen de background la imagen "equilibrium". Ese container incluye una imagen que es el icono icon-view. Cambiando el valor del atributo visibility de ese container cuando pasas el ratón por encima logras el efecto (el icono aparecería por encima de la imagen de background cuando pasas el ratón por encima y la capa verde se pondría por encima de la imagen de fondo)
Sería así:
En html:
<div class="img-container"> <div class="transparent-layer"><img src="./images/icon-view.svg" alt="View icon"> </div> </div>Luego en el fichero css:
.img-container .transparent-layer {
position: absolute;
border-radius: 12px;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
background-color: var(--cyan-color-t);
}
main .img-container:hover .transparent-layer {
visibility: visible;
cursor: pointer;
}
Espero que te sirva !
Marked as helpful1@AlexMdz5620Posted about 1 year agoOhhh!!! ok ok muchas gracias!!! Más tarde lo aplico!!! muchas gracias!!!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord