How to Animate Text Links Diagonally Forward on Image Hover [Caption Hover Effects]

Adding motion to web design can enhance both user visibility and usability.
This article explains how to animate text links diagonally forward on image hover using Caption Hover Effects (toucheffects.js, modernizr.custom.js).
There are 7 different animation styles available, and you can customize them to fit your design.
We’ll also introduce the actual code and demo page, so feel free to give it a try.

CSS Description for Animating Text Links Diagonally Forward on Image Hover

*This is the CSS for the image hover area (.grid li). Modify as needed.

<style type="text/css">
/* CSS code unchanged */
</style>

HTML Description for Animating Text Links Diagonally Forward on Image Hover

*Prepare an image hover area (ul.grid > li > figure).
The animation is triggered when hovering over this area.
Image files (1.jpg ~ 4.jpg) are used as examples.

<h1>When you hover over the image, the text link will animate diagonally forward</h1>

            <ul class="grid cs-style-1">
                <li>
                    <figure>
                        <img src="1.jpg" alt="img01">
                        <figcaption>
                            <h3>JavaScript</h3>
                            <span>JavaScript</span>
                            <a href="https://dad-union.com/category/javascript">JavaScript Category Page＞</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="2.jpg" alt="img02">
                        <figcaption>
                            <h3>CSS</h3>
                            <span>CSS</span>
                            <a href="https://dad-union.com/category/css">CSS Category Page＞</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="3.jpg" alt="img03">
                        <figcaption>
                            <h3>PHP</h3>
                            <span>PHP</span>
                            <a href="https://dad-union.com/category/php">PHP Category Page＞</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="4.jpg" alt="img04">
                        <figcaption>
                            <h3>WordPress</h3>
                            <span>WordPress</span>
                            <a href="https://dad-union.com/category/wordpress">WordPress Category Page＞</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>

JavaScript Description for Diagonally Animating Text Links on Image Hover Using Caption Hover Effects (toucheffects.js, modernizr.custom.js)

*Load the modernizr.custom.js and toucheffects.js files.

<script src="modernizr.custom.js"></script>
<script src="toucheffects.js"></script>

*The snippet below from toucheffects.js handles the animation when hovering over the image area (ul.grid > li > figure).

～

		[].slice.call( document.querySelectorAll( 'ul.grid > li > figure' ) ).forEach( function( el, i ) {
			el.querySelector( 'figcaption > a' ).addEventListener( 'touchstart', function(e) {
				e.stopPropagation();
			}, false );
			el.addEventListener( 'touchstart', function(e) {
				classie.toggle( this, 'cs-hover' );
			}, false );
		} );

～

Demo Page: Diagonal Animation of Text Links on Image Hover Using Caption Hover Effects

Demo Page: Diagonal Animation of Text Links on Image Hover Using Caption Hover Effects

Source: Caption Hover Effects

The source is available below.

Caption Hover Effects

Conclusion

Using Caption Hover Effects, you can easily implement animated text link effects on hover.
With just a bit of CSS and JavaScript setup, you can apply various stunning effects.
Refer to the sample code in this article and enhance your website with engaging motion.
It will broaden your design possibilities and help you create a more attractive site.

*Please use this technique at your own risk.
Do not reuse the Google Analytics tag from the head section of the demo page.