1. Home
  2. Docs
  3. Image Elements
  4. Hover Effect

Hover Effect EA Element

Elementor Addons provides the Hover Effect widget that helps you increase and improve your website’s engagement and design interaction. Hover effect can be applied at the Widget, Column, and Section level, and can be combined to create unlimited effect variations. Here in this tutorial, you’re going to learn how to use the Hover Effect element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Hover Effect Element

 

»Content

 

Image

⇒Image: Upload the image for the hover effect.

⇒Image Size: Customize the fixed size of the hover effect’s image from our pre-defined size type.

⇒Border Radius: Set the border radius of the image.

⇒Hover Effect: Select a hover effect style from the list to have your preferred effect on the image hover.

⇒Link: Enable/disable the link on the image. Then, add a custom link or select an existing page link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Alignment: Set the image alignment either left, right or center.

⇒CSS Classes: Add your custom CSS classes here to get your own style on the image.

 

Content

⇒Icon: Enable/disable the icon. When enable, set the icon type and then select an icon either from the font awesome link or upload a custom image. And then customize the icon size for different dimensions.

⇒Title: Enable/disable the title and then add the title text of the image if you enable it.

⇒HTML Tag: Select a heading tag for the title. Headings are defined with H1 to H6 tags.

⇒Separator: Enable/disable the separator.

⇒Description: Enable/disable the description and then add the description text if you enable it.

⇒Alignment: Set the content alignment either left, right or center.

 


»Style

 

Front Image

⇒CSS Filters: Customize the CSS filters for the front image of the hover effect. Edit the blur, brightness, contrast, saturation, and hue of the front image.

 

Icon

⇒Color: Add a custom color to the icon if you add one in the hover effect.

⇒Background Color: Add a custom color to the icon background and control the opacity.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the icon for different dimensions.

⇒Margin: Set the margin value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

 

Title

⇒Text Color: Add a custom color to the title of the image.

⇒Typography: Set the typography options for the titles.

⇒Text Shadow: Customize the text-shadow color, set the horizontal and vertical value of the shadow, and control the blur radius of the title text.

⇒Margin: Set the margin value for the top, right, bottom and left around the title for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the title for different dimensions. You can link the values together or customize them individually.

 

Separator

⇒Color: Add a custom color to the separator if you add one in the hover effect.

⇒Style: Add a style of the separator here.

⇒Width: Customize the width of the separator for different dimensions. Enter Separator width in (PX, EM, %), default is 100%

⇒Height: Customize the height of the separator for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

 

Container

⇒Overlay Color: Add a custom overlay color and control the opacity of the hover effect container.

⇒Background Color: Add a custom color to the container background and control the opacity.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the container for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the container for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the container for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Hover Effect Element.


Was this article helpful to you? Yes No

How can we help?