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: Frontend Mentor | NFT Preview Card Component with CSS Flex coding challenge solution
- Live Site URL: Frontend Mentor | NFT preview card component
- Semantic HTML5 markup
- SCSS
- Flexbox
- CSS Grid
- Mobile-first workflow
Tipe file svg bisa dibuat jadi content
di pseudo selector CSS.
Buat bikin overlay warna di atas gambar bisa bikin div
baru setelah img
. Nanti parent nya dibuat relative
terus overlay-nya dibuat absolute
dengan height dan width 100%
%overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.nft-img {
position: relative;
width: 100%;
display: flex;
.overlay-bg {
background-color: $primary-cyan;
@extend %overlay;
opacity: 0;
}
&:hover .overlay-bg {
opacity: 0.5;
border-radius: 1rem;
}
}