buy now
$24.99
Your browser doesn't support modern features such as CSS3, therefore you we see only a simple fade effect. To view other types, use a more modern browser.
dw hover FX samples and demos page

What is a hover effect ?

Hover effects are a creative way to display additional content when holding the cursor over images, contributing to a better experience for your sites. You can use any of the 30 included presets, which come with different types of content, such as "learn more" buttons, captions, icons and more.

This image has an Overlay type Hover Effect, with 1.3 seconds duration.

You could use this kind of effect to enrich the experience for your website users. Hover the image to to reveal the content!

Title goes here
Description goes here, replace this text with your own.

This image has an Caption type Hover Effect, with 1.3 seconds duration.

Title goes here
Description goes here, replace this text with your own.

Base hover effects: caption and overlay

Start with the base effect type,overlay or caption then set the duration, colors
and background and you're good to go. You also use whatever animation type you like,
to achieve unique hover effects.

Here are two simple examples using both base types :

Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Type : Overlay
Easein
3s
animation
duration
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Type : Caption
Quickin
1s
animation
duration

Caption hover effect

There are two variants of this hover effect : push and over . First one will nicely animate the image by
sliding either to top, or to bottom. The second one will use a cool sliding animation, likewise from top
or bottom and showing your hover content on top of the image.

Check them out below !

Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Caption Type
push
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Caption Type
over

Caption Direction

For both caption variants you can choose wich sliding direction the hover effect will have :
top or bottom

See examples below:

Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Hover Effect
Push
Top
caption
direction
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Hover Effect
Over
Top
caption
direction
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Hover Effect
Push
Bottom
caption
direction
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Hover Effect
Over
Bottom
caption
direction

Overlay Type

The second base hover effect is overlay.While caption hover efffect slides,
or reveal itself by sliding and covering some of image's area, the overlay hover effect
covers the entire image, and uses various cool looking animations when doing so.

Here are a few overlay hover effects simple examples :

Title goes here
Settings
0.8s
QuickIn
Color
Duration
Animation
Title goes here
Settings
0.9s
superfast
Color
Duration
Animation
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Settings
1.2s
EaseInOut
Color
Duration
Animation
Title goes here
Settings
1.0s
Accelerate
Color
Duration
Animation
Notice that you can also customize the hover effect's background color.
This goes for both overlay and caption hover effects.

HoverContent Elements

To get you started quickly, HoverFX comes with several usual content elements
such as title, subtitle , button or icon. You can find them along the bundled presets in
various combinations.
Also you can add your own HTML content.

See below a few over content elements samples :

Title goes here
Title
Subtitle
Button
Icon
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Title
Subtitle
Button
Icon
Title goes here
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Title
Subtitle
Button
Icon
Title goes here
Title
Subtitle
Button
Icon

Animation types

You can choose from the 10 built-in animation types.Use them on you hover effect for unique and cool user experience,

A few examples:

Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Animation Type
accelerate
Animation Type
EaseInOutBack
Description goes here, replace this text with your own. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Animation Type
Accelerate
Animation Type
SuperFast

Browsers support

HoverFX uses modern technologies such as CSS3 Transitions& Transform.
(where available, e.g: modern browsers) for smooth animations that works great on modern browsers
On Legacy browsers (such as Internet Explorer 7 or 8) due to performance and technology limitations,
the effects are simplified to a fade animation.

Mobile devices support

Hover FX works on modern touch enabled mobile devices.
Instead of hover action, all you need to do is tap or long tap on the image with hover effect added
and the effect will be played.

RevealFX
Beautiful scroll animations

As you may have noticed, as soon as this block of text becomes visible in the viewport, it appears with a nice fade + a slide from right effect. The above heading also uses a similar appearing effect, with top entry point.These are reveal effect examples and are triggered by your scrolling.

Get it bundled and save money
RevealFX & HoverFX

Only $39.99