Javascript required
Skip to content Skip to sidebar Skip to footer
Home / Elementor Picture Hover Effect Shows Different Picture

Elementor Picture Hover Effect Shows Different Picture

REA Image Gallery widget allows you to create attractive image gallery widget. The widget supports the WordPress gallery. You can select, drag and drop multiple images.

Content

Layout - The Widget allows you to select the layout of the image gallery you want to showcase.

  • Grid: This layout will display products in a "rows and columns" structure.

  • Masonry: This layout adjusts the images in columns according to size. Hence reduces the size of the image gallery on the web page.

  • Justified: Set all images in the same row at the same height. It fills all spaces between the rows. Read more about this layout in the article here.

  • Carousel: Images will display in a nice slider.

This feature allows you to display the images in a carousel slider. You have control over the navigation arrows, no. images to show at a glance, no. of images to scroll at once, pause on hover, etc.

This feature allows you to display images assigned to their respective categories. You can switch between the categories by clicking on the upper tab with the category name assigned.

You can set the image click action to lightbox. When you click on any image it will show up on a full screen. You can also set the caption to the image to be shown in the lightbox, add zoom, social share, download links on the lightbox for that particular image. You will find these actions in the top right corner of the Lightbox. See how to add a caption for the image?

You can set a custom URL to the image click. This gives you the flexibility to direct users to any external link with a single click on the image. See how to set a custom link for the image?

Responsive Support

You can manage the image gallery on responsive devices easily with a toggle.

Style

Layout

You can set the column and row gap for the image gallery through the style section. You can also the vertical alignment for the images.

Thumbnail

This option gives you a scale effect to resize the image on hover. You can also set the opacity and opacity color for the images.

Instagram Like Filters

This feature allows you to set different Instagram-like effects on the image. Filters can be applied to the original image or hover image. You can also set overlay color.

Justified Layout arranges the images and displays them in a neat and clear manner.

Additional Options Available for Justified Layout -

  • Row Height - All the images will be arranged in a row manner. This option lets you control the height of the row images that are being arranged.

  • Last Row layout - Sometimes very few images remain in the last row which does not look professional. So to handle this use this setting to manage the images in the last rows. Justify allows you to cover the entire row with the images. Hide will hide the last row images.

How to Set an Icon on Image Hover?

Many times when you set click actions for the images, you may want to add the icon on the image hover so that it will guide users to the image click actions.

This option allows you to add an image or icon on the image hover.

How to Display Specific Category Tab as a Default on Page Load?

When you enable the filterable image gallery option, on page load you have seen the tab which loads first is "ALL" by default. You can change this by selecting any other category assigned to images to load first.

Set Default Tab on Page Load toggle to Custom and then enter the category you wish to set as default on page load. Note: Make sure you enter the exact same name for the category set for the image. Refer How to Set Categories for Images?

How to Set Categories for Images?

REA Image Gallery widget allows you to display images in a filterable gallery.

Filterable Gallery allows you to categorize and display images. The category names assigned to images will be shown in a filterable tab title.

To assign a category please follow the below steps -

  • Select an image from the media library list as shown below.

  • REA categories will appear in the far right in the image options. You can set multiple categories comma separated.

How to Open a Webpage with the Click of an Image?

Sometimes you may want to direct the users to an external link on clicking the images on the website. The Custom Link feature allows you to set images in the gallery to open a webpage on click.

Here are the steps to set a custom link to images –

  • Select an image from the media library list as shown below.

  • You will see an option " REA Custom Link " on the far right under media information. The URL you add here will be set to that particular image you have selected and once the user clicks on that image it will be redirected to this URL. Set Click Action as a Custom Link for image gallery.

    Under Additional Options, you will see an option "Click Action". Select the Custom Link option from the dropdown. You can also set the option Link Target to open the webpage in a new window or same window.

How to Add a Caption for the Image?

REA Image Gallery widget gives you the ability to add a description in the form of a caption for the images in the gallery.

You can add the caption on the image or on hover. Caption can be some more information about the image or navigation information.

Here are the steps to set custom link to images –

  • Select an image from the media library list as shown below.

  • The Caption option will appear in the media information column on the right side.

Elementor Picture Hover Effect Shows Different Picture

Source: https://docs.cyberchimps.com/responsive-elementor-addons/rea-image-gallery