Submitted over 2 years ago
Responsive landing page using CSS flex box and semantic HTML5
@Josh-Adey
Design comparison
SolutionDesign
Solution retrospective
How can I create the active hover state for the image equilibrium of this project?
Community feedback
- @biqrarPosted over 2 years ago
For hover use the below code
<div class="card"> <img src="images/image-equilibrium.jpg" alt="" /> </div> .container { min-height: auto; max-width: 1440px; background-color: hsl(217, 54%, 11%); border-radius: 10px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .card { height: auto; min-width: 90%; background-image: url(images/hijab-icon-black-vector-illustration-260nw-1712786086.jpg); background-size: cover; margin: 20px 20px; border-radius: 10px; } .card img { width: 100%; height: auto; border-radius: 10px; } .card img:hover { opacity: 0; transition: 1s; }
Marked as helpful0
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