¿Alguna sugerencia que deseen dejarme?
En la parte del hover referente a la imagen no pude, opte por ver las soluciones, así que doy crédito a Arturo López Rosa.
Talvez si saben otra manera sería de mucha ayuda. Gracias.
Hello, Your solution is very nice. and your design is also pretty good. I have a different approach to achieve the hover effect on image. You can watch it in my profile for more details..
**this is html **
<div class="card__image">
<div class="originalImage">
<img src="./images/image-equilibrium.jpg" alt="img">
</div>
</div>
and this is its CSS
.card__image{
width: 100%;
border-radius: 1rem;
cursor: pointer;
position: relative;
}
.originalImage{
width: 100%;
}
.originalImage img{
width: 100%;
border-radius: 1rem;
}
.originalImage::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: var(--cyan) url(./images/icon-view.svg)no-repeat center center;
opacity: 0.6;
visibility: hidden;
}
hope you like it.. Happy coding...!