Swap image on :hover

[djp]

A am new to bricks from Divi, and missing a couple of things I can’t figure out how to do. Image swap on hover is one.

I see the pseudo class :hover feature only applies to styling and not content. If I want to swap an image out on hover, how would I do that? At the moment its an svg logo (white to full coloured and it needs to be another image/svg not a saturation effect). I can’t seem to find how to load the second image to activate on hover?

TIA

[shahi]

You can do that by adding some class.

First add a div as wrapper, then add two images.

Now set this class to wrapper element.

.image-wrapper{
  position: relative;
}

Then set the first image class as follows

.image-top {
  position: relative;
  z-index:1
}
.image-top:hover{
  opacity: 0;
}

Now Set the second image class like this

.image-bottom  {
  position: absolute;
  top:0;
  left:0;
}

See the image for the structure.