Design comparison
Solution retrospective
I made the project with tailwind CSS. With the help of the perfect pixel extension.
I have problems with the active state of the hover image. I can convert the color of the image but the eye icon has lower opacity.
Community feedback
- @coderSureshPosted about 1 year ago
Hey there, excellent work.
I didn't know anything like the Pixel Perfect extension existed. Thanks for this.
I have created a pull request on your repo to solve your issue with the hover state overlay and icon. You can find it here: https://github.com/retronauta/frontend-mentor-nft-preview/pull/1
Alternatively, you can look through my solution here: https://github.com/coderSuresh/nft-preview-card
And, if you don't feel like going through links, here is a general idea of how I did it.
index.html
- use img_container class - use custom css to display overlay on hover (in input.css) --> <div class="img_container relative flex cursor-pointer justify-center items-center h-fit my-6" > <!-- - making overlay with view icon - bg-transparent-cyan is a custom color from tailwind.config.js - that gets its value from css variable in input.css --> <div class="overlay absolute pointer-events-none top-0 hidden left-0 w-full h-full bg-transparent-cyan rounded-xl" > <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" > <img src="./images/icon-view.svg" alt="view icon" class="w-12" /> </div> </div> <!-- - we don't need any pointer events on this image - using pointer-events-none class --> <img src="./images/image-equilibrium.jpg" alt="Nft picture" class="rounded-xl pointer-events-none" /> </div>
input.css
:root { --transparent-cyan: hsla(178, 100%, 50%, 0.50); } /* make image overlay visible on hovering its parent div */ .img_container:hover .overlay { display: block; }
tailwind.config.js
module.exports = { content: ['./dist/*.{html, js}'], theme: { extend: { colors: { .... 'transparent-cyan': 'var(--transparent-cyan)' //from css variable (to be used in html) }, fontFamily: { outfit: ['Outfit'], }, }, }, plugins: [], }
Marked as helpful1@linomattosPosted about 1 year ago@coderSuresh Hello friend, thank you very much for the help! It was very useful.
0
Please log in to post a comment
Log in with GitHubJoin 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