[V6] An Introduction to the Hover Effect in GemPages

What is the hover effect?

One of the most used CSS effects in web design, the hover effect, put simply, is a graphical alteration of an element when hovered over with a mouse cursor.

When done right, it provides an easy way to create great attention-grabbing visuals to aid with usability and encourage Call to Actions buttons’ click-through rate.

Elements that support the hover effect in GemPages

Button and (P) Cart Button

The two elements share the same parameters within the Button Color section:

Step 1: Toggle on the Hover Options switch

Step 2: Two new parameters will become available, make adjustments as you see fit:

• Background Color Hover: Change the buttons’ background color when hovered
• Text Color Hover: Change the text label’s color when hovered

Step 3: Hit “Save” and “Preview” to check for your page. When you’re happy with the result, hit “Publish” to bring the changes to your front store.

(P) Image

The (P) Image element offers two distinct hover effects: Zoom and Hover. We’ve prepared a separate article to help you use this feature. Please visit this article.

Aside from the three mentioned above, there are many other applications of the hover effect that can be done with HTML and CSS coding. You can right-click on the element and select Edit Code to start designing your own hover effect. Below is an example of how custom CSS code can be used to add a hover effect to change text color in the Text Block element.