This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: https://github.com/RioCantre/nft-preview-card
- Live Site URL: https://nft-preview-card-project.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
I learned how to add another layer on hover state of an image. I structured first the HTML elements and use CSS styling to accomplish the ideal design.
See the code snippets below:
<div className="hero-image">
<img src={images} className= "main-image" alt='img' />
<div className="image-hover">
<img src={iconView} className="icon-view" alt="icon view"/>
</div>
</div>
.image-hover {
background: hsla(178, 100%, 50%, 0.5);
width: 278px;
height: 278px;
transition: .5s ease;
opacity: 0;
position: absolute;
top: 37.8%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
border-radius: 8px;
}
In this project I would like to improve more on styling the hover state of the hero image,the placement of the components and perfect height of the container. I struggled with the actual position of the card since I'm using a small screen.
- W3schools - This help me solved the hover state of the hero image. I used this example and applied it on CSS style.
- Website - Rio Cantre
- Frontend Mentor - @RioCantre
- Twitter - @CantreRio