Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive NFT Card Component

@JoshLanderz

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am having problems getting the aqua-ish colour to attach to the image when hovering on the NFT. I tried using the properties backdrop-filter & filter.

None of them worked how I had originally planned. I think I could have done this with JS but I am assuming there is an easier way to do this of course with just CSS. Could anyone assist on this? Much thanks in advance :)

Community feedback

@Darkfenix013

Posted

buenas, espero te encuentres muy bien, has hecho un excelente trabajo, espero poderte ayudar con el efecto hover sobre la imagen de equilibrio intenta colocarle una position relavite al contenededor que tiene la class="superposición de envoltura de imagen" , intenta de esta forma, espero te sirva, a mi tambien me costo un poco este paso, espero te funcione. .superposicion{ position: absolute; bottom: 1rem; width: aqui intenta colocar el mismo valor que en el contenedor de la imagen de equilibrio%; height: 0; opacity: 0; display: flex; justify-content: center; align-items: center; border-radius: 15px; background-color: hsla(178, 100%, 50%, 0.596); transition: .5s ease; overflow: hidden; }

.superposición de envoltura de imagen:hover .superposicion{ height: 90%; opacity: 1; cursor: pointer; }

2

Please log in to post a comment

Log in with GitHub
Discord logo

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