Skip to content
Submitted almost 2 years ago

NFT preview card component

A S Irfan Ahmed•160
@coding-sagar
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

I have a problem making this project.

After hover effect on equilibrium image icon image will appear. But after using opacity whole image including background is affected. I need only background to be affected. Feel free to suggest. Feedback Welcome.🙂

Community feedback

  • Maicon Rodrigues Monteiro•120
    @maiconrmonteiroPosted almost 2 years ago

    Olá amigão, eu não tenho certeza da sua pergunta, mas acredito que você não quis adicionar a opacidade no ''olhinho''. A opacidade eu criei uma camada com before e coloquei acima da foto, depois mudei a opacidade da mesma. adicionei o 'olhinho' com after e coloquei apacidade 01 com o hover.

    .link-card::before { content: ""; background-color: var(--primary-medium); width: 100%; height: 100%; position: absolute; opacity: 0; transition: 0.3s ease-in-out; }

    .link-card::after { content: ""; background-image: url(../img/icon-view.svg); background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; position: absolute; opacity: 0; transition: 0.3s ease-in-out; }

    .link-card:hover::before { opacity: 0.3; }

    .link-card:hover::after { opacity: 1; }

    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