Change Image on Hover

What does this code do?

This code snippet will allow you to change an image to a different image when the visitor hovers overtop.

Note: On a mobile device the image will change when a user clicks on the image.

Video Tutorial

Add the Images

Select the Image that you want to change on hover, duplicate the block, and replace the image in one of the blocks with the second image. Place the image you want to show on hover on the top. Make sure the settings in the block are the same.

Code Snippets

Copy and paste the following code into the Custom CSS box.

/* Change Image on Hover */
#BLOCKID {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
#BLOCKID:hover {
  opacity: 1;
}

Then add the block id of the image block on the top.

How To Use It

1. Add the two image blocks. Place the image you want to show on hover on the top.

2. Copy and paste the code as indicated above.

3. For more information on where to paste the code, check out our Start Here guide.

4. Customize the timing of the transition.