How to create onhover effect for different images useing display:flex;?

Question

This is an extension of my previous question described on this SO link

From the given solution i am able to get on hover effect. but the problem is im not able to give different image to different . Can anyone suggest me some solution!

Answer 1

You have multiple options:

• Give specific id 's to each <li>

  for eg, let's say you apply id 's first, second and third respectively for the <li> 's You can add the background as follows:

   #first{ background: url("/path-to-image"); } #second{ background: url("/path-to-image"); } #third{ background: url("/path-to-image"); } 

• Use different classes ( i prefer id 's since classes are meant to be used to group elements )

• Use CSS pseudo selectors.

   .wrap li:nth-child(1){ background: url("/path-to-image"); } .wrap li:nth-child(2){ background: url("/path-to-image"); } .wrap li:nth-child(3){ background: url("/path-to-image"); } 

like this