NFT preview card using HTML, CSS, Flexbox, transitions

You need to add an interactive element around that main image. What would you expect to happen on click? That will determine what element it should be and what the label should say.

In your hrefs on these mock projects don't add !# as that's just an invalid link. Instead use href="/" so the page would reload on click

Hey Rostyslav, great jobbb))) I made hover effect like you, but a little bit different:

1. I made it all together in :after element. I set to the background-image icon svg. And I put the background-color in :after element. So when i hovered to that image I changed only opacity from 0 to 1.
2. Name classes on their own. If you think the div with class will have it's elements, name without parent-name. For example: Create a div with class card. Inside this card you can create elements like card__title, card__description and etc. And within this card class you can create a div with class "image". And name it's elements like image__item, image__title, etc. You don't need to name everything like their parent element. Block element modifier. Just create a block and inside of this block it's element. Also you can create more block inside of that block.

I really tried my best to explain to you. I hope I helped you a little. Keep doin' I wish you the best!

Hello ROSTYSLAV NAZARENKO. I was the same with the hover effect. Check W3Schools for an example of the hover effect that I also used.

For the class naming sense. Well I use something similar to BEM but a little less creative since I suck at naming things and I hate tailwind length classes so I go mostly by one or two names per element unless JS is involved. But I like your class naming sense because it is not to long and it explains perfectly what it is.