In this tutorial i will describ how to create hover effect on image.so today I want to show how to create hover effect on image using CSS3 and jQuery, For this demonstration, you will need a basic knowledge of CSS, JavaScript, and HTML coding techniques.Some effect on jquery image effect when you take mouse over the images the active effects will happen, it similar using flash design. But here we use only jquery and css to make beautiful action effect and more compatible.
HTMl code to create HTMl view.
Result:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<li class=“category-data”>
<div class=“cat-head”><h3>Approach/
Trekking</h3></div>
<a href#”>
<img class=“icon margin-top” data-target=“approach” title=“Approach/ Trekking” alt=“Approach/ Trekking” src=“ab.jpg”/>
<img id=“approach” title=“Approach / Trekking” alt=“Approach / Trekking” src=“t.jpeg”>
</a>
</li>
put below javascript code in head tag of file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
<script type=“text/javascript”>
jQuery(document).ready(function() {
jQuery(“.main-panel li”).hover(
function() {
var obj = jQuery(this).find(‘img:first’);
obj.attr(‘src’, obj.attr(‘src’).replace(‘-off’, ‘-on’));
var targetUrl = ‘#’ + obj.attr(‘data-target’);
jQuery(targetUrl).attr(‘src’, jQuery(targetUrl).attr(‘src’).replace(‘-off’, ‘-on’));
},
function() {
var obj = jQuery(this).find(‘img:first’);
obj.attr(‘src’, obj.attr(‘src’).replace(‘-on’, ‘-off’));
var targetUrl = ‘#’ + obj.attr(‘data-target’);
jQuery(targetUrl).attr(‘src’, jQuery(targetUrl).attr(‘src’).replace(‘-on’, ‘-off’));
}
);
});
</script>
