Skip to content
OverviewSolutions
32
Comments
1
Imtiaz
@Imtiaz42

All comments

  • WiredSenpai•40
    @WiredSenpaiSubmitted almost 2 years ago

    I really struggled to create an active state for the picture. I need help creating an image overlay

    NFT preview card

    1
    Imtiaz•520
    @Imtiaz42Posted almost 2 years ago

    create div with img .

    give main img position of relative

    give it position absolute bg color you want height and width 100% and opacity 0.

    when hovering on img turn opacity to 1.

    .layer{ position: absolute; top: 0%; right: 0%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0; background-color: hsla(178, 100%, 50%, 0.5); border-radius: 8px; }

    .image:hover .layer{ opacity: 1; }

    i have completed this challenge you can see there.

    i am also a begginer i hope this helps you

    Marked as helpful
    1