@LouMauriege
Posted
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.
