my eye is not opacity when i hover cursor on image. i really don't know how fix it. May be anybody can help?
David Paulos
@David-PaulosAll comments
- @rahunakSubmitted over 2 years ago@David-PaulosPosted over 2 years ago
I have a very simple solution for that problem
Have a look at my code
On the HTML I have a div that contains two items, the cube image with a class of "three-D-cube" and an empty div with a class of "hover-eye".
On the css I styled the image "three-D-cube" like this
.three-D-cube { width:100%; height:100%; border-radius:10px; }
.image-box { width: 232px; height: 232px; object-fit:contain; padding-block-start:14px; margin-block-end:15px; }
On the css I styled the empty div "hover-eye" in order to sit on top of the "three-D-cube" and to be ready for the :hover state.
.hover-eye { width: 232px; height: 218px; position: absolute; top: 14px; left: 14px; border-radius:10px; }
Finally the "hover-eye" on hover state like this:
.hover-eye:hover { cursor:pointer; background-color: hsla(178, 100%, 50%, 0.5); background-image: url(./images/icon-view.SVG); background-repeat: no-repeat; background-position:center; }
Let me know your thoughts
0