Design comparison
Solution retrospective
What is the best way to alternate a main image on hover? How can I make this more accessible?
Community feedback
- @Enmanuel-Otero-MontanoPosted 11 months ago
Hello @SarahCooper-TC!
I don't know if you noticed that the images are not displayed. I know this is not why you asked, but if you want to improve, this should interest you. The reason why the images are not displayed is because you established an absolute path to retrieve the images, this works perfectly in your local environment, but not remotely. For it to work correctly apply the route as follows
./images/icon-ethereum.svg
.On the other hand, to make a website well accessible you have to keep many things in mind, but some of them are the correct use of semantic tags, if you use the <img> tag put the description in the alt attribute. Have the appropriate color contrast between the background and the text, the appropriate font size and several other things.
If you have any questions, don't hesitate to ask.
Marked as helpful0@SarahCooper-TCPosted 11 months agoThank you so much @Enmanuel-Otero-Montano ! I just realized that and definitely needed help understanding why.
0@Enmanuel-Otero-MontanoPosted 11 months agoExcellent @SarahCooper-TC! Keep coding.
0 - @danielmrz-devPosted 11 months ago
Hello Sarah!
Your project looks great!
About the hover effect, here's how I did it:
HTML
<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic"> <div class="icon"> <img src="images/icon-view.svg" alt="icon-view" class="icon-view"> </div>
CSS
.pic { width: 300px; background: url('images/icon-view.svg') center center no-repeat; background-color: $Cyan-hover; background-size: cover; margin: auto; border-radius: 10px; } .icon { display: grid; justify-content: center; align-items: center; position: absolute; opacity: 0; background-color: $Cyan-hover; width: 300px; height: 300px; border-radius: 10px; } icon:hover { opacity: .5; cursor: pointer; }
Just don't forget to change the class names to match yours.
I also added a
cursor: pointer;
for the user to know that the image is clickable.I hope it helps!
1
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