@jbaldwin406
Posted
I struggled with the hover effect too at first. One solution I found is to make an extra 'overlay' div and set it hidden (in my case set the opacity to 0) and then when the image is hovered over, flip that opacity to visible. There are probably some other ways of doing it, but this is what worked for me.
Example: Here is the html for the overlay.
<div class="overlay">
<a href="#">
<img
class="hover-view"
src="./images/icon-view.svg"
alt="view icon"
/>
</a>
</div>
Then in the css set opacity: 0; Also note: There may be another way to do this, but in order to get the view icon to not have the opacity effect applied to it, I instead set the background color of the overlay div to rgba in order to give just the background the opacity and not the icon on top of it.
Then on hover of the image:
.card-image:hover .overlay{
opacity: 1;
cursor: pointer;
}
This will show the hover effect you are after!
Cheers and I hope this wasn't just terrible rambling! Nice job and keep up the good work!