made responsive by just scaling the main div

Community feedback

• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Hello

  I would suggest putting the hover on the parent #image-div and then applying opacity: 1; to #view to make the eye icon appear. Something like:

  #image-div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px;
    background: hsl(178, 100%, 50%);
  }
  #image-div img {
    width: 100%;
  }
  #image-div:hover img {
    opacity: 20%;
    cursor:pointer;
    transition:0.3s ease;
  }
  #view {
    position: absolute;
    max-width: 40px;
    opacity: 0;
  }
  #image-div:hover #view {
    opacity: 1;
  }
  

  Also, check your accessibility/html issues flagged by frontend mentor 👍

  1

  ---

  

  Valentine Daniel•180

  @valcruxxPosted almost 3 years ago

  @byronbyron Thanks a million, that worked!

  I'll check the accessibility issues

  Thanks again

  0