- HTML
- CSS
NFT preview card component
Hi txosca.
You provided a creative solution for hovering the image. However, I think its better solution to use pseudo-elements ::before and ::after. This way the hover effect will always appear over the image. You can check out my codepen to study ::before/::after here. Try adding the class for the div containing the image and use something like the code below.
Also I dont think its a good idea to mix in-line and external css in one project. It creates a big mess.
I hope this helps!
.div-image {
position: relative;
}
.div-image:hover::after {
content:"";
position: absolute;
inset: 0;
border-radius: 15px;
background-color: hsla(178, 100%, 50%, 0.7);
}
.div-image:hover::before {
content:"";
position: absolute;
inset: 0;
background-image: url(images/icon-view.svg);
background-repeat: no-repeat;
background-position: center;
z-index: 100;
}