Design comparison
Solution retrospective
I have one minor problem with the hover state of the view SVG icon that I couldn't make it as it should be. If anyone knows the solution to that hover effect, please tell me, it would be highly appreciated!!!😁🙏
Problem solved!
Community feedback
- @correlucasPosted over 2 years ago
Hello Carson, congratulations dor the challenge.
I same double about how to change the color of the SVG on hover one month ago when I did this same challenge.
I know three ways to solve that :
- Using the property filter in the svg and applying the value for the color you want, in this case theres an online tool that calculate the exact color. Link below:
CSS Filter Color: https://codepen.io/sosuke/pen/Pjoqqp
-
Create two svg one white and the other with the hover color and swap them using a pseudo-element like :before/:after.
-
Working with SVG and converting to a path to them apply the property fill and change its color. Useful articles below:
CSS TRICKS how to svg color change: https://css-tricks.com/change-color-of-svg-on-hover/
How to convert SVG to path https://stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file#:~:text=If%20you%20have%20a%20complex,them%20into%20a%20single%20path.
In this case I've used the CSS filter generator because its easier to apply, you can check my solution to see how I did it.
Solution: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX
I hope ir helps you, feel free to ask anything 👏✌️
Marked as helpful1@Carson3377Posted over 2 years ago@correlucas Thanks man for your assistance too, I've tried yours as well. Highly appreciated!
1 - @lurnfxPosted over 2 years ago
You should use a div on your Image div then set your image div as a relative position and the other div as an absolute position then you have to bg color to as specified and change the opacity so that it can give you that transparent look Note: use the hover property for the first div and set its visibility property as visible and when not hover set to hidden.
0@lurnfxPosted over 2 years ago@Carson3377 I think this can help you:-
HTML:-
<div class="top"> <div class="icon"> <img src="images\icon-view.svg" /> </div> </div>
style:
top{ width:90%; height:50%; border-radius: 20px; margin: 16px; background-image: url("../images/image-equilibrium.jpg"); background-repeat: no-repeat; background-position: center; background-size: 110%; cursor:pointer; position:relative;
} .icon { position:absolute; width:100%; height:100%; background-color: hsl(178, 100%, 50%, 55%); opacity:0; border-radius: 20px; transition: opacity 0.3s ease-in-out; } .icon img{ display:flex; margin:auto; margin-top: 120px; } .icon:hover{ opacity:1; }
Marked as helpful1@Carson3377Posted over 2 years ago@lurnfx Thanks man for the help, you saved me, it works! Highly Appreciated
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