• Video Tutorial
  • GemPages Forum
Start For Free
  • Video Tutorial
  • GemPages Forum
homePage BuildingGemPages' EditorAn introduction to the hover effect in GemPages
homePage BuildingGemPages' EditorAn introduction to the hover effect in GemPages

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, the hover effect 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.

 

If you are not familiar with coding, that’s no problem, please feel free to contact our GemPages Support Team at any time to receive technical assistance from experts.

We are available via email or live chat.

 

Was this helpful?

Yes  No
Related Articles
  • [Editor 7.0] Upload Custom Font
  • [Editor 7.0] Customize the Global Styles
  • [Editor 7.0] Section and section limit
  • [Editor 7.0] Global Styles
  • [Editor 7.0] An overview of the Design tab
  • How to create a blog post
footer logo
  • Release Note
  • Privacy Policy
  • Terms of Service
  • Community
  • Video Tutorial
© 2017-2023 GemPages. All rights reserved.
Popular Search:Responsive design, Transfer content, Custom code