Submitted over 1 year ago

Eth card with HTML AND CSS vanilla

Cesjhoan Feliu•190

@CesjhoanFeliu

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, I had problems mostly with the hover positioning as I am not used to position relative and absolute.

If you could help me by telling me better ways to have done the hover I would be totally grateful, nice day!

Community feedback

JEVN-MVRC•160

@Jean-Marc18Posted over 1 year ago

Hello Cesjhoan Feliu 👋. Congratulations on successfully completing the challenge! 🎉 I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️: to get a better result you can do this (I deleted the picture tag) :

 <div class="content-img">
   <img src="./images/image-equilibrium.jpg" alt="">
   <div class="hover">
      <img src="./images/icon-view.svg" alt="">
    </div>
 </div>

CSS 🎨:

.content-img{
  position : relative;
}
.hover {
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 3px;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  opacity: 0;
}
.hover:hover {
  opacity: 1;
  cursor: pointer;
  background-color: var(--Hover);
  visibility: visible;
}

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord