@Feyisara2306
Posted
Hello Heitor! well done on completing the challenge.
As regard your question on image overlay hover effect, put the two images in a separate div and declare an empty div for the overlay, then style its container div with a position:relative; and a 100% width. Then display the images as a block, and the overlay div position: absolute; .
Here is a snippet below...
.image{ position: relative; width: 100%; }
.image_img{ display: block; width: 100%; border-radius: 10px; }
.image_overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 255, 247, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; border-radius: 10px; }
I hope this helps.
Good luck and happy coding!
Marked as helpful
