@Roneeey
Posted
Hey there,
In your div class="image-nft-container" add a div to place the svg icon for the eye: (i called my div for this image .class="overlay"
<div class="overlay"> <svg id="icon-view" width="48" height="48" xmlns="http://www.w3.org/2000/svg" > <g fill="none" fill-rule="evenodd"> <path d="M0 0h48v48H0z" /> <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="#FFF" fill-rule="nonzero" /> </g> </svg> </div>Then style the overlay class with the following: The position of absolute will allow you to place the icon where you want it on the nft image. Make sure your NFT image is set to a position of relative otherwise the icon image won't display absolute. Set opacity to 0 so it is hidden when there is no hover state.
.overlay { position: absolute; top: 20px; width: 310px; height: 50%; border-radius: 5px; cursor: pointer;
background: rgba(10, 152, 177, 0.753); transition: 0.5s ease; opacity: 0; display: flex; justify-content: center; align-items: center; }
The style your NFT image container :hover to opacity 1. So when you hover it displays: .container:hover .overlay { opacity: 1; }
Marked as helpful