Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Mouse Hovers for Layer Content

home_topbanner

Use the built-in hover settings to apply mouse hover styles for your slider's Layer content.

  • Article Note
    The following covers text and images, but hover options are also available for additional content types such as Buttons, Shapes and Objects using the same setup.

1. Hovers for Text Layers

back to top
1.1 Add a Text Layer to the editing stage, and style its default view.
text-caption
1.2 Select the Advanced Styling tab, along with the Hover option.
hover-option
1.3 Enable the "Layer Hover" option, and then adjust the hover animation settings.
hover-settings

1. Animation Speed

2. Animation Easing

3. Mouse Cursor

4. Hover z-index

1.4 Toggle the styling options to the "Hover" state.
select-hover-styles
1.5 Apply your special hover styles.
hover-style-options

2. Hovers for Image Layers

back to top
2.1 Add an Image Layer to the editing stage.
image-layer
2.2 Select the Advanced Styling tab, along with the Hover option.
image-layer-hover
2.3 Enable the "Layer Hover" option, and then adjust the hover animation settings.
hover-settings

1. Animation Speed

2. Animation Easing

3. Mouse Cursor

4. Hover z-index

2.4 Toggle the styling options to the "Hover" state.
image-hover-option
2.5 Apply your special hover styles.
50% Transparency/Opacity on Mouse Hover:
image-hover-transparency
With a slight rotation:
image-hover-rotation