Equilibrium flex without eye

Community feedback

• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greeting Kevin Garcia!! Congratulations for completing your challenge!, 👏👏👏 .

  I take a look at you code, and You're actually so close to archive that hover effect.

  I did some changes to make it work for you, helpfully can give you some hints.

  style.css line 100

  
  .brium {
      width: 360px;
      height: 360px;
      position: relative;
      background-color: var(--Cyan);
      display: block;
      transition: all 300ms ease-in-out;
      z-index: 1;
      border-radius: 1rem;
      overflow: hidden;
  }
  
  .brium::after {
      content: url(../images/icon-view.svg);
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all 300ms ease-in-out;
  
  }
  .brium:hover img {
      opacity: 0.55;
  }
  
  .brium:hover::after {
      opacity: 1;
  }
  
  /* and here you have it, just remove the reset */
  
  /* HOVERS  */
  
  /* .equilibrium:hover {
      color: var(--Cyan);
      cursor: pointer;
  }
  .name:hover {
      color: var(--Cyan);
      cursor: pointer;
  }
  .brium:hover{
     background-color: var(--Cyan);
     border-radius: 1rem;
     background-image: url(/images/icon-view.svg);
  } */
  
  

  Hope this help!!

  useful resource

  • https://www.w3schools.com/howto/howto_css_image_overlay.asp.

  overall, Happy codding, and have a Good Day/Night

  Marked as helpful

  2
• 

  Eduardo•200

  @EDDuardOo-CodePosted about 2 years ago

  Something you can do mentioned by @Hussain5325 it is to created the effect with a pseudo element(like ::before) or you could also make the effect with a div with the class of overlay , here is a an example about that Overlay icon

  also something you can do it is to take the image and make the effect with javascript

  Marked as helpful

  2
• 

  Hussain Murtaza•410

  @Hussain760Posted about 2 years ago

  Hi There Kevin Garcia!

  I am here to tell you that you can make hover effect by using pseudo elements on the image.

  if you cannot do it yourself try to see solutions.

  Here is my solution for it.

  https://www.frontendmentor.io/solutions/nftpreviewcardcomponentmain-PYUCRWtTXZ

  Marked as helpful

  1