hover – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Mon, 04 Aug 2025 07:14:34 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 Low-Opacity Hover Effect for Navigation Menus https://xtratheme.com/docs/theme-options/low-opacity-hover-effect-for-navigation-menus/ https://xtratheme.com/docs/theme-options/low-opacity-hover-effect-for-navigation-menus/#respond Mon, 04 Aug 2025 07:08:36 +0000 https://xtratheme.com/docs/?p=4774

Dim Inactive Menu Items on Hover for Cleaner Focus

Step 1
XTRA

This feature adds a sleek visual touch to your navigation menus: when you hover over a menu item, the non-hovered items automatically dim using a low-opacity effect. This makes the active item stand out and helps guide user attention more effectively.

You can enable it from:
Theme Options > Header > Menus Hover Effects >Menus hover opacity



This subtle animation enhances the user experience, especially on design-focused websites, by reducing visual clutter and improving readability. It’s a great way to create a more polished, interactive feel without being intrusive.

Menu hover opacity
]]>
https://xtratheme.com/docs/theme-options/low-opacity-hover-effect-for-navigation-menus/feed/ 0
Add SVG Cursor Effect to Carousels https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/ https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/#respond Sat, 02 Aug 2025 10:11:17 +0000 https://xtratheme.com/docs/?p=4748

Add an Animated SVG Cursor to Your Carousel on Hover

Step 1
XTRA

A new option has been added to enhance user interaction on carousels: SVG cursor on mouse hover. Instead of using the default pointer, you can now apply a custom SVG cursor that appears specifically when users hover over carousel elements.

Navigate to:
Theme Options > General > Advanced > Carousel Hover Cursor


This feature is perfect for adding a modern, creative touch to your sliders—whether you want a stylish arrow, animated icon, or any custom-designed SVG. It helps create a more immersive and branded experience, especially for design-forward websites or minimal layouts. A small detail, but one that makes your UI feel sharper and more engaging.

Svg22
]]>
https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/feed/ 0
Element: Image Hover Zoom https://xtratheme.com/docs/page-builder/element-image-hover-zoom/ https://xtratheme.com/docs/page-builder/element-image-hover-zoom/#respond Mon, 17 Jun 2024 08:12:53 +0000 https://xtratheme.com/docs/?p=1523

Video Tutorial

Description and Screenshot

Step 1

Add single image everywhere you want in your website and upload your own image. This image element is different than simple image, It supports zoom on mouse hover.

Hover_zoom
  • Image – Upload your own image in high resolution
  • Image size – You can set custom size, suitable for resizing image on the fly
  • Container styling – Container styling border, shadow, margin, etc.
  • Background layer – Custom background shape with offset to out sides of container
  • Advanced tab – Responsive, Animation, Parallax, etc.
]]>
https://xtratheme.com/docs/page-builder/element-image-hover-zoom/feed/ 0