Skip to content
Submitted about 2 years ago

NFT Preview Card Component

stiratto•160
@Stiratto
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! how's your day going?

This is my third project finished, i have a question:

How can I make it so that when I stop clicking the hover, the transitions fall slowly and not immediately? I didn't find anything about it on Google.

Also, any feedback its appreciated.

Goodbye! 👋

Community feedback

  • Kamaradev•295
    @KamaradevPosted about 2 years ago

    the design is nicely done the problem with the hover effect is that you should added the transition property before the hover for example: the transition propery should be in the .eye-image class and not the .eye-image:hover

    .eye-image { background-color: hsla(178, 100%, 50%, 0.15); opacity: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-image: url(images/icon-view.svg); background-position: center; /* transition propery */ transition: 1000ms; transition-property: all; transition-duration: 1000ms; transition-timing-function: ease-in-out; transition-delay: 0s; }

    .eye-image:hover {
    opacity: 1;
    cursor: pointer;
     
}
    Marked as helpful
    1

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