Image Hover
Image hover is the effect which is based on flipping the image when the cursor hovers on it. It creates a great opportunity to add interactivity to elements on your website. With the help of our tools, you can not only add the color overlay or animation but also make additional elements appear on hover.
This is how it can look on the published site:
Adding an image hover element
1. Firstly, choose the Custom block from the block gallery and add it to a site:
2. Hover over the empty column and click on it to add elements, then choose the Image hover in the pop-up window:
... or add the Image hover as an element to some existing blocks:
Managing the content
1. Roll over the element and click on the 'gear' in the top left corner to open the Settings:
2. In the Content tab upload the image or choose it from the gallery:
3. After you set a photo there, you can edit it with some customization options — e.g., applying filter or color overlay:
Adding the hover effect
1. Proceed to the Hover tab in the Settings:
2. Here you can toggle on the elements which you want to appear after users roll the cursor over the image — title, description or button — and change its alignment as well:
Note: you can make the title show even without the cursor hover:
3. You can also add the color overlay or filter to your hover for the better representation of the text:
Adding the animation
1. In the Hover tab you can adjust the animation settings for the elements and the image itself:
Related Articles
Setting Focal Point For a Background Image
Sites on SiteCliq are automatically adapted to different screen sizes. However, you can manually choose a focal point for the background images to ensure that they look good on PCs, mobiles and tablets. Focal point helps you select the center of the ...Parallax Effect Settings
The parallax effect makes the background image of the blocks move at a slower rate than the foreground. This creates an illusion of depth to the page, giving the content a 3D effect as viewers scroll down. If you want to surprise your site visitors ...Adding site's background
A good background creates the tone for the website and complements the content. On SiteCliq, you can add an image, a video or a color to the site’s background, and easily adjust it to your needs. Follow the steps below to add a site's background. ...Adding a GIF
A GIF is an image file format commonly used for images on the web and sprites in software programs. In simple words, GIFs are a series of images or soundless video that loops continuously and doesn't require anyone to press play. Learn how to insert ...Adding a Before/ After Gallery
If you want to showcase the changes by comparing 2 images, the Before/ After gallery will be a perfect solution. This functionality suits best for dentistry, beauty industry, construction and interior design companies, etc. The site visitors can pull ...