@al3xback
Posted
Hi Eric!
Try add this to your style.
.hero-img { position: relative; }
.hero-img::after { content: ""; position: absolute; width: 100%; height: 100%; inset: 0; background: hsl(178, 100%, 50%, 60%) url(--your-icon-view-url--) no-repeat center; z-index: 1; transition: opacity 0.3s; opacity: 0; }
.hero-img:hover::after { opacity: 1; }
I hope those will help! :)
Marked as helpful
@erictan86
Posted
@al3xback thank you
@erictan86
Posted
@lastcodeteam12 thank you
Account Deleted
@al3xback @al3xback
"Simplest is the best"
I had also such a problem you can use this simple code :
.active-stats{ /* this is hover image*/ position:absolute; opacity:100%; padding:116px; margin:25px 0 0 0; background-color:rgba(0, 255, 255, 0.336); border-radius:8px; opacity:0%; } .active-stats:hover{ opacity:100%; transition:0.3s }
the idea here is that you :
. give hover image padding that cover equilibrium image (doesn't affect image dimensions).
. make its background color cyan with less opacity (alpha) this makes white eye full opacity but its background don't.
. then hide hover eye image with lowering it's opacity.
. at hover bring back its opacity, with smooth transition.
