Skip to content
Submitted about 2 years ago

Responsive site built with FlexBox

Attrams•130
@Attrams
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi guys, I had a difficult time implementing the hover effect for the image. After googling I found some code which solved it but I didn't fully understand the code. I will appreciate it if you could explain it to me. code can be found below. Thank You.

// HTML

<div class="image-container"> <img src="images/image-equilibrium.jpg" alt="nft image" class="image-nft"> </div>

// CSS .image-container { width: 100%; border-radius: 0.6rem; position: relative; overflow: hidden; cursor: pointer; }

.image-container::after { content: url('images/icon-view.svg'); background: hsla(178, 100%, 50%, 0.5); position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 0; transition: all 0.25s ease; }

.image-container:hover::after { opacity: 1; }

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @Attrams, Congratulations on completing this challenge!

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

    The box-shadow is a bit too strong, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

    If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Attrams•130
    @AttramsPosted about 2 years ago

    Thanks @correlucas for the suggestion.

    0
  • Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey Attrams, congratulation on solving this challenge. The code you provided basically says that you are creating another div using pseudo element with the same width and height and giving him a background-color and a content which is a icon and that icon is centered using flexbox. That created div is hided with opacity: 0 and on hover it is set back to be visible. You can find more about pseudo elements here, they are really useful.

    https://www.youtube.com/watch?v=zGiirUiWslI&t=25s

    Keep coding!

    Marked as helpful
    0
    Attrams•130
    @AttramsPosted about 2 years ago

    Thanks @milosshomy for the explanation and the link.

    0

Please log in to post a comment

Log in with GitHub

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