Image Hover Effects

Add hover effects to your images

CSS/JS files (add code to <HEAD> section):


<!-- DC Image Hover Effects CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/image_hover_effects/css/tsc_image_hover_effects.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Image Hover Effects JS -->
<script type="text/javascript" src="dreamcodes/image_hover_effects/js/jquery.adipoli.min.js"></script>
<script type="text/javascript" src="dreamcodes/image_hover_effects/js/tsc_image_hover_effects.js"></script>

Fade Hovers

Dark Style

View code:


<!-- zoom hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css1" ></span> <img src="http://pimg.co/p/210x140/cccccc" border="0" /> </a>

<!-- plus circle hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css2" ></span> <img src="http://pimg.co/p/210x140/666666" border="0" /> </a>

<!-- plus hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css3" ></span> <img src="http://pimg.co/p/210x140/333333" border="0" /> </a>

<div class="tsc_clear"></div> <!-- line break/clear line -->

View code:


<!-- play hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css4" ></span> <img src="http://pimg.co/p/210x140/cccccc" border="0" /> </a>

<!-- play square hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css5" ></span> <img src="http://pimg.co/p/210x140/666666" border="0" /> </a>

<!-- plus square hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css6" ></span> <img src="http://pimg.co/p/210x140/333333" border="0" /> </a>

<div class="tsc_clear"></div> <!-- line break/clear line -->

View code:


<!-- link hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css7" ></span> <img src="http://pimg.co/p/210x140/cccccc" border="0" /> </a>

<!-- expand hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css8" ></span> <img src="http://pimg.co/p/210x140/666666" border="0" /> </a>

<!-- window hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css9" ></span> <img src="http://pimg.co/p/210x140/333333" border="0" /> </a>

<div class="tsc_clear"></div> <!-- line break/clear line -->


Light Style

View code:


<!-- zoom hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css1_light" ></span> <img src="http://pimg.co/p/210x140/cccccc" border="0" /> </a>

<!-- plus circle hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css2_light" ></span> <img src="http://pimg.co/p/210x140/666666" border="0" /> </a>

<!-- plus hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css3_light" ></span> <img src="http://pimg.co/p/210x140/333333" border="0" /> </a>

<div class="tsc_clear"></div> <!-- line break/clear line -->

View code:


<!-- play hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css4_light" ></span> <img src="http://pimg.co/p/210x140/cccccc" border="0" /> </a>

<!-- play square hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css5_light" ></span> <img src="http://pimg.co/p/210x140/666666" border="0" /> </a>

<!-- plus square hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css6_light" ></span> <img src="http://pimg.co/p/210x140/333333" border="0" /> </a>

<div class="tsc_clear"></div> <!-- line break/clear line -->

View code:


<!-- link hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css7_light" ></span> <img src="http://pimg.co/p/210x140/cccccc" border="0" /> </a>

<!-- expand hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css8_light" ></span> <img src="http://pimg.co/p/210x140/666666" border="0" /> </a>

<!-- window hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css9_light" ></span> <img src="http://pimg.co/p/210x140/333333" border="0" /> </a>

<div class="tsc_clear"></div> <!-- line break/clear line -->


Small Fade Hovers - Classic Styles

Small Dark Hovers

View code:


<!-- sml zoom hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css1_small" ></span> <img src="http://pimg.co/p/160x110/cccccc" border="0" /> </a>

<!-- sml magnify hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css2_small" ></span> <img src="http://pimg.co/p/160x110/666666" border="0" /> </a>

<!-- sml link hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css3_small" ></span> <img src="http://pimg.co/p/160x110/333333" border="0" /> </a>

<!-- sml expand hover -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css4_small" ></span> <img src="http://pimg.co/p/160x110/000000" border="0" /> </a>

<div class="tsc_clear"></div> <!-- line break/clear line -->
Small Light Hovers

View code:


<!-- sml zoom hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css1_small_light" ></span> <img src="http://pimg.co/p/160x110/cccccc" border="0" /> </a>

<!-- sml magnify hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css2_small_light" ></span> <img src="http://pimg.co/p/160x110/666666" border="0" /> </a>

<!-- sml link hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css3_small_light" ></span> <img src="http://pimg.co/p/160x110/333333" border="0" /> </a>

<!-- sml expand hover light -->
<a href="#" class="tsc_zoom_css"> <span class="roll_css4_small_light" ></span> <img src="http://pimg.co/p/160x110/000000" border="0" /> </a>

<div class="tsc_clear"></div> <!-- line break/clear line -->

Fade Hover - (Using Adipoli JS Library)

startEffect : normal, hoverEffect : popout

View code:


        <img class="img-style row1" src="http://pimg.co/p/200x133/ccc" />
        <img class="img-style row1" src="http://pimg.co/p/200x133/666" />
        <img class="img-style row1" src="http://pimg.co/p/200x133/333" />
startEffect : overlay, hoverEffect : sliceDown

View code:


        <img class="img-style row2" src="http://pimg.co/p/200x133/ccc" />
        <img class="img-style row2" src="http://pimg.co/p/200x133/666" />
        <img class="img-style row2" src="http://pimg.co/p/200x133/333" />
startEffect : transparent, hoverEffect : boxRandom

View code:


        <img class="img-style row3" src="http://pimg.co/p/200x133/ccc" />
        <img class="img-style row3" src="http://pimg.co/p/200x133/666" />
        <img class="img-style row3" src="http://pimg.co/p/200x133/333" />
startEffect : overlay, hoverEffect : foldLeft

View code:


        <img class="img-style row4" src="http://pimg.co/p/200x133/ccc" />
        <img class="img-style row4" src="http://pimg.co/p/200x133/666" />
        <img class="img-style row4" src="http://pimg.co/p/200x133/333" />
startEffect : transparent, hoverEffect : boxRainGrowReverse

View code:


        <img class="img-style row5" src="http://pimg.co/p/200x133/ccc" />
        <img class="img-style row5" src="http://pimg.co/p/200x133/666" />
        <img class="img-style row5" src="http://pimg.co/p/200x133/333" />
startEffect : grayscale, hoverEffect : normal

View code:


        <img class="img-style row6" src="http://pimg.co/p/200x133/ccc" />
        <img class="img-style row6" src="http://pimg.co/p/200x133/666" />
        <img class="img-style row6" src="http://pimg.co/p/200x133/333" />


© TemplateAccess