Hover Effect - When hover an block change the image source of another block

Site URL: https://amandakuang.com/

Hello👋, I am wondering if there is a way to switch the image source of block A according to the hover action on block B. 

Basically I'm trying to make block A show some information (in the form of image) about block B when user hovers over B, and make A return to the original state (cover image) when nothing is hovered.

My intuition is this but it's not working:

(block B) :hover
{
  (block A) img {src= "source.png";}
  }

I've attached a screenshot of the website I'm working on. Image A is the yellow block, and image B is one of the grey blocks.

Thank you!

Hi. Have you found the solution yet?

On 2/2/2021 at 9:08 AM, tuanphan said:

Hi. Have you found the solution yet?

No not yet 😞

You can try finding "Tabs"

eg this plugin.

or free code on Codepen

• https://codepen.io/kball/pen/vXVEYZ
  https://codepen.io/sujal_radadiya/pen/YzPENEX
•