Cr0zy07• 60
@Cr0zy07
Posted
Hi There, I used the 'after' pseudo element on the outer 'div' of the image, and added relative position on that 'div'...
Take a look at this snippet...
.card .card-image { height: calc(320px - 3rem); width: calc(320px - 3rem); border-radius: 1rem; position: relative; overflow: hidden; }
.card .card-image::after { content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: hsl(178, 100%, 50%, .5) url('images/icon-view.svg') no-repeat center; opacity: 0; transition: .5s ease; }
, or better see my solution to get better understanding https://cr0zy07.github.io/training/NFT-preview-card-component/...
Good luck...
Marked as helpful
0
