Mouse Hover Effects

Add-ons

2026-07-26 06:29 6 次浏览 • 0 次下载 222.1KB

Plugin description: The module darkens and an overlay layer appears. 12 cool CSS3 image overlay animation effects on mouse hover.

To use these CSS3 image overlay animation effects on mouse hover, include the sass-compiled.css file compiled from SASS or the less-compiled.css file compiled from LESS in your page.

1	`<link` `rel="stylesheet"` `href="css/sass-compiled.css"` `type="text/css"` `/>`

Alternatively:

1	`<link` `rel="stylesheet"` `href="css/less-compiled.css"` `type="text/css"` `/>`

The basic HTML structure for these CSS3 image overlay animation effects on mouse hover is as follows:

<div class="pic">
    <img src="img/01.jpg" class="pic-image" alt="Pic"/>
    <span class="pic-caption bottom-to-top">
        <h1 class="pic-title">Pic Title</h1>
        <p>Image description text</p>
    </span>
</div>

Available animation effects

This CSS3 image overlay animation effect on mouse hover provides the following 12 CSS3 animation effects.

.bottom-to-top: Slide from bottom to top.
.top-to-bottom: Slide from top to bottom.
.left-to-right: Slide from left to right.
.right-to-left: Slide from right to left.
.rotate-in: Rotate in.
.rotate-out: Rotate out.
.open-up: Flip upward.
.open-down: Flip downward.
.open-left: Flip to the left.
.open-right: Flip to the right.
.come-left: Flip to the left with a tilt effect.
.come-right: Flip to the right with a tilt effect.