Submitted 6 months ago

NFT-Preview

Joshua Olanrewaju Ikulayo•220

@Saviourjr

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Building a responsive Web is my utmost priority.... Happy doing thisss !!

What specific areas of your project would you like help with?

uhm. i don't know how to hover an image over another image... i tried searching couldn't get what i wanted..

So any idea will be appreciated . Thanks!

Community feedback

Samuel Adu•990

@samuel-aduPosted 5 months ago

You can use the change the opacity of an overlay image to achieve that, something like this snippet below.

.img-overlay {
  background-color: var(--clr-accent);
  border-radius: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.img-container:hover .img-overlay {
  opacity: 0.5;
}

.img-overlay img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Marked as helpful

Joshua Olanrewaju Ikulayo•220

@SaviourjrPosted 5 months ago

Thank you that was helpful@samuel-adu

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