NFT Preview card with hover effects

Community feedback

• 

  Lou•110

  @LouMauriegePosted about 1 year ago

  Hi,

  First of all congrats for the job you've accomplished ! :) Your classes are well labeled, your code is clean.

  The main problem I can observe is, you didn't use any "display: flex;" instead of it you're using some span tag where you shouldn't.

  But otherwise you put your image in "display: block;" which is a good trick to get ride of any strange comportment do to the "display: inline-block;".

  If you want to learn about flexbox this website is really good: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  Then to answer to your question, to add the hover effect, you can create another div inside your <div class="image"> which should have the same size and be on top of you image tag but without background color(transparent). Then when the <div class="image"> is hovered add a background to this new div. To get the eye do the same thing but instead of being same size just put it in the middle with an opacity of 0 and on hover opacity of 100.

  I hope it will help you, feel free to ask more questions if needed.

  0