All comments

• 

  Евгений•50

  @rahunakSubmitted over 2 years ago

  my eye is not opacity when i hover cursor on image. i really don't know how fix it. May be anybody can help?

  

  css html

  3

  30
  

  David Paulos•80

  @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