This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Image Hover Effects

Add hover effects to your images

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

?
1
2
3
4
5
6
7
<!-- DC Image Hover Effects CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/image_hover_effects/css/dc_image_hover_effects.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Image Hover Effects JS -->
<script type="text/javascript" src="dcodes/image_hover_effects/js/jquery.adipoli.min.js"></script>
<script type="text/javascript" src="dcodes/image_hover_effects/js/dc_image_hover_effects.js"></script>

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

?
1
2
3
4
5
6
7
<!-- DC Image Hover Effects CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/image_hover_effects/css/dc_image_hover_effects.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Image Hover Effects JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/image_hover_effects/js/jquery.adipoli.min.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/image_hover_effects/js/dc_image_hover_effects.js"></script>

Fade Hovers

Dark Style

View code:

?
1
2
3
4
5
6
7
<!-- zoom hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css1" ></span> <img src="http://cdn.dcodes.net/p/210x140/cccccc" border="0" /> </a>
<!-- plus circle hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css2" ></span> <img src="http://cdn.dcodes.net/p/210x140/666666" border="0" /> </a>
<!-- plus hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css3" ></span> <img src="http://cdn.dcodes.net/p/210x140/333333" border="0" /> </a>
<div class="dc_clear"></div> <!-- line break/clear line -->

View code:

?
1
2
3
4
5
6
7
<!-- play hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css4" ></span> <img src="http://cdn.dcodes.net/p/210x140/cccccc" border="0" /> </a>
<!-- play square hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css5" ></span> <img src="http://cdn.dcodes.net/p/210x140/666666" border="0" /> </a>
<!-- plus square hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css6" ></span> <img src="http://cdn.dcodes.net/p/210x140/333333" border="0" /> </a>
<div class="dc_clear"></div> <!-- line break/clear line -->

View code:

?
1
2
3
4
5
6
7
<!-- link hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css7" ></span> <img src="http://cdn.dcodes.net/p/210x140/cccccc" border="0" /> </a>
<!-- expand hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css8" ></span> <img src="http://cdn.dcodes.net/p/210x140/666666" border="0" /> </a>
<!-- window hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css9" ></span> <img src="http://cdn.dcodes.net/p/210x140/333333" border="0" /> </a>
<div class="dc_clear"></div> <!-- line break/clear line -->


Light Style

View code:

?
1
2
3
4
5
6
7
<!-- zoom hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css1_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/cccccc" border="0" /> </a>
<!-- plus circle hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css2_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/666666" border="0" /> </a>
<!-- plus hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css3_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/333333" border="0" /> </a>
<div class="dc_clear"></div> <!-- line break/clear line -->

View code:

?
1
2
3
4
5
6
7
<!-- play hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css4_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/cccccc" border="0" /> </a>
<!-- play square hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css5_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/666666" border="0" /> </a>
<!-- plus square hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css6_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/333333" border="0" /> </a>
<div class="dc_clear"></div> <!-- line break/clear line -->

View code:

?
1
2
3
4
5
6
7
<!-- link hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css7_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/cccccc" border="0" /> </a>
<!-- expand hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css8_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/666666" border="0" /> </a>
<!-- window hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css9_light" ></span> <img src="http://cdn.dcodes.net/p/210x140/333333" border="0" /> </a>
<div class="dc_clear"></div> <!-- line break/clear line -->


Small Fade Hovers - Classic Styles

Small Dark Hovers

View code:

?
1
2
3
4
5
6
7
8
9
<!-- sml zoom hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css1_small" ></span> <img src="http://cdn.dcodes.net/p/160x110/cccccc" border="0" /> </a>
<!-- sml magnify hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css2_small" ></span> <img src="http://cdn.dcodes.net/p/160x110/666666" border="0" /> </a>
<!-- sml link hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css3_small" ></span> <img src="http://cdn.dcodes.net/p/160x110/333333" border="0" /> </a>
<!-- sml expand hover -->
<a href="#" class="dc_zoom_css"> <span class="roll_css4_small" ></span> <img src="http://cdn.dcodes.net/p/160x110/000000" border="0" /> </a>
<div class="dc_clear"></div> <!-- line break/clear line -->
Small Light Hovers

View code:

?
1
2
3
4
5
6
7
8
9
<!-- sml zoom hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css1_small_light" ></span> <img src="http://cdn.dcodes.net/p/160x110/cccccc" border="0" /> </a>
<!-- sml magnify hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css2_small_light" ></span> <img src="http://cdn.dcodes.net/p/160x110/666666" border="0" /> </a>
<!-- sml link hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css3_small_light" ></span> <img src="http://cdn.dcodes.net/p/160x110/333333" border="0" /> </a>
<!-- sml expand hover light -->
<a href="#" class="dc_zoom_css"> <span class="roll_css4_small_light" ></span> <img src="http://cdn.dcodes.net/p/160x110/000000" border="0" /> </a>
<div class="dc_clear"></div> <!-- line break/clear line -->

Fade Hover - (Using Adipoli JS Library)

startEffect : normal, hoverEffect : popout

View code:

?
1
2
3
<img class="img-style row1" src="http://cdn.dcodes.net/p/200x133/ccc" />
<img class="img-style row1" src="http://cdn.dcodes.net/p/200x133/666" />
<img class="img-style row1" src="http://cdn.dcodes.net/p/200x133/333" />
startEffect : overlay, hoverEffect : sliceDown

View code:

?
1
2
3
<img class="img-style row2" src="http://cdn.dcodes.net/p/200x133/ccc" />
<img class="img-style row2" src="http://cdn.dcodes.net/p/200x133/666" />
<img class="img-style row2" src="http://cdn.dcodes.net/p/200x133/333" />
startEffect : transparent, hoverEffect : boxRandom

View code:

?
1
2
3
<img class="img-style row3" src="http://cdn.dcodes.net/p/200x133/ccc" />
<img class="img-style row3" src="http://cdn.dcodes.net/p/200x133/666" />
<img class="img-style row3" src="http://cdn.dcodes.net/p/200x133/333" />
startEffect : overlay, hoverEffect : foldLeft

View code:

?
1
2
3
<img class="img-style row4" src="http://cdn.dcodes.net/p/200x133/ccc" />
<img class="img-style row4" src="http://cdn.dcodes.net/p/200x133/666" />
<img class="img-style row4" src="http://cdn.dcodes.net/p/200x133/333" />
startEffect : transparent, hoverEffect : boxRainGrowReverse

View code:

?
1
2
3
<img class="img-style row5" src="http://cdn.dcodes.net/p/200x133/ccc" />
<img class="img-style row5" src="http://cdn.dcodes.net/p/200x133/666" />
<img class="img-style row5" src="http://cdn.dcodes.net/p/200x133/333" />
startEffect : grayscale, hoverEffect : normal

View code:

?
1
2
3
<img class="img-style row6" src="http://cdn.dcodes.net/p/200x133/ccc" />
<img class="img-style row6" src="http://cdn.dcodes.net/p/200x133/666" />
<img class="img-style row6" src="http://cdn.dcodes.net/p/200x133/333" />


© TemplateAccess