@correlucas
Posted
👾Hello @Coderio10, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
1.Replace the <p> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
2.Add the alt text to improve accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader). ---> <img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor">
3.Here's how you can add the hover effect:
Container needed to position the overlay. Adjust the width as needed
.container {
position: relative;
width: 100%;
max-width: 340px;
}
Make the image to responsive
.image {
width: 100%;
height: auto;
}
The overlay effect (full height and width) - lays on top of the container and over the image
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
When you mouse over the container, fade in the overlay icon
.container:hover .overlay {
opacity: 1;
}
The icon inside the overlay is positioned in the middle vertically and horizontally .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
When you move the mouse over the icon, change color
.icon-eye:hover {
color: hsl(178, 100%, 50%, 0.5);;
}
👨💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX
✌️ I hope this helps you and happy coding!
Marked as helpful
