Horizontal Image-Following Text Effect

Add-ons

2026-07-26 07:00 5 次浏览 • 0 次下载 59.9KB

Plugin description: Horizontal image-following animation code (jQuery).

Horizontal Image-Following Animation Code (jQuery), featuring stunning visual effects. Move the mouse over an image to display its detailed description. The direction in which the description enters and exits changes according to the direction from which the mouse enters or leaves the image. Compatible with major browsers (not compatible with IE6).

Usage:

1. Include style.css, jquery.min.js, and home.min.js in the head section.

<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/home.min.js"></script>

2. Add the code within the  section to your file.

<div class="content">
    <ul id="da-thumbs" class="da-thumbs">
        <li>
            <a href="#" >
                <img src="images/01.jpg">
                <div class="hot_info">
                    <h2>Image Demo Information 1</h2>
                    <em></em>
                    <p title="Image Demo Description 1">Image Demo Description 1</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" >
                <img src="images/02.png">
                <div class="hot_info">
                    <h2>Image Demo Information 2</h2>
                    <em></em>
                    <p title="Image Demo Description 2">Image Demo Description 2</p>
                </div>
            </a>
        </li>
    </ul>
</div>    

3. You can freely increase or decrease the number of images.