Image Hover Effects

20/01/2021

There are several effects you can apply to your images in Avada Builder, and one of these is the Image Hover Effect. You can choose from None, Zoom In, Zoom Out or Lift Up. These are sleek and clean hover effects that will make your images animate dynamically when they are hovered over.

With the Zoom In effect, the image zooms in on mouseover, effectively cropping a small percentage of the image. With the Zoom Out effect, the image starts zoomed in a small amount, and zooms out to reveal the entire image when moused over. With the Lift Up effect, the image gets slightly larger all around on mouseover, as well as having a subtle box shadow applied. Reads of the Avada Documentation will be familiar with this effect, as it’s the default for all images in the documentation.

When these effects are used on images with borders, the Zoom In and Zoom Out effects have no impact on the border, but with the Lift Up effect, the Border enlarges with the image. Try them out for yourself to see how they work! Below is an example of the Lift Up effect at work, both in the image, and on the actual screenshot image, and below that, a list of all the Avada Builder Elements where the ‘Hover Type’ option can be used.

Example of Lift Up Effect
IMPORTANT NOTE: Image Hover Effects are different from Image Rollover Effects for blog and portfolio items.

How To Use The ‘Hover Type’ Option

Step 1 – Add any of the Elements listed above to your page.

Step 2Find the ‘Hover Type’ option and choose the hover effect you’d like to use. It’s typically on the General Tab.

Step 3Once finished, save your changes.

Avada Website Builder

739,304 Businesses Trust Avada

Get Avada
Avada Website Builder

739,304 Businesses Trust Avada

Get Avada
Avada Website Builder

739,304 Businesses Trust Avada

Get Avada