Design comparison
Solution retrospective
Hello Friends,
I got a few questions!! sorry for the long question :( ...
- To display the hover/focus styles when hovering over the cube image, I've initially added the hover styles using the
::before
pseudo-element and set the opacity to 0. Then set the opacity to 1 when hovered. (Continuation of the question after code block).
<div class="avatar"> <img class="cube-img" src="./images/image-equilibrium.jpg" alt="image of cube balanced on one of it's vertex and at equilibrium" /> </div>
.avatar::before {
content: url("./images/icon-view.svg");
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 255, 247, 0.6);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity 0.1s ease-in;
}
.avatar:hover {
cursor: pointer;
}
.avatar:hover::before {
opacity: 1;
}
I initially did .avatar:hover .avatar::before { opacity: 1;}
instead of .avatar:hover::before { opacity: 1;}
as I thought .avatar:hover .avatar::before { opacity: 1;}
meant when you hover over the .avatar div changes will be made .avatar::before, but nothing changed. Could someone explain why my initial code/ thinking was incorrect?
-
In my HTML, I added the raw SVG code using
<svg>
to display the SVG image. Is there any other alternative? -
Any best coding practices I can improve on?
Please let me know anything else I haven't mentioned above and could improve.
THANKS IN ADVANCE (:
Community feedback
- @cosmoartPosted over 2 years ago
Hi Sai!, Congratulations on completing this challenge, it looks great!,
.avatar:hover .avatar::before { opacity: 1;}
Translates to: When hovered in .avatar you will give an opacity of 1 to the ::before child from .avatar named .avatar.It would be something like this:
<div class="avatar"> <div class="avatar"></div> </div>
You can see it more clearly by hovering over the selector from a code editor like Visual Studio Code.
Another way to display the SVG is using the <img> tag, something like this:
<img src="image.svg" alt="...">
If you want to know more about the differences is to use each one you can see this question on stackoverflow
I hope you find it useful, Happy coding! 👋
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