Hover help

Question

When the user hovers over the image and ONLY the image I want the orange divs to expand and display some content which are in p and h2 tags. Can someone edit my code and help me out?
https://code.sololearn.com/WEf9pU89b0oy/?ref=app

Answer 1

with your actual html structure, that's not possible to do what you expect by only css...

however, you could achieve equivalent behavior by javascript:

https://code.sololearn.com/W2hUBhtGqYYH/?ref=app

... with some modification on css selectors (replacing :hover by a custom class and using the next sibling operator (+) just after.

with javascript, we define onmouseover and onmouseout to images to set/remove the custom class on parent node.

that's the easiest fix to make work the expected behavior.

another way would be to rethink your html structure to be able to target the .content elements from the img:hover (but they should be at same level for next sibling operator to work -- have same parent node)... then you could avoid javascript ;P

Answer 2

Thank you soooo much! Was really helpful!

Answer 3

visph can you elaborate a little on how each line works in the js part if you don't mind?

Answer 4

for each image element inside .imgBx class elements got as array like from querySelectorAll('.imgBx img'), we define onmouseover and onmouseout event handler... in each function, we add or remove the 'over' class...