Beautiful Image Hover Effects with jQuery/CSS3

Today we are glad to show you two beautiful image hover effects with jquery and CSS3. This example1 we want to show you, jquery hover effect using animation opacity transform color and the example2 you will see classic effect using zoom overlay using jquery and css. let's find out my tutorial bellow:

You like this post:  jQuery Mouseover Effect Example

Example 1

In this tutorial, we are going to show you how to create a beautiful image gallery with hover effect by using jquery and CSS3. This example was designed using jquery animate opacity to transform image color effect with caption title as well. We have also created beauty CSS3 button on this image effect to make it more attractive.

image hover effects jquery cssDemo download

Let's go with my tutorial coding bellow:

This beauty image hover effect using plugin: jquery-1.8.1.min.js and beautiful google fonts Dosis.

The Markup

The jQuery function animation for capacity effect will have the following code:

	//portfolio - show link
		function () {
		function () {


The Cascading Style Sheets (CSS) will have the following structure:

 .freshdesignweb{width:950px; margin:0 auto;}
	 .freshdesignweb a:link{text-decoration:none;}
     .freshdesignweb article{ float:left; width:157px; height:157px; } /*cursor:pointer;opacity:0.5;*/
	.fdw-background{ background-color:rgba(0,0,0,0.6);opacity:0; margin-top:-25px; width:100%; height:100%; }
	.fdw-background h4{font-size:20px; font-family: 'Dosis', sans-serif; text-align:center; padding:40px 40px 0; }
	.fdw-background .fdw-port{ text-align:center; padding:0 40px 0; }
	.fdw-background .fdw-port a{ padding:8px 15px; font-size:1em; }
	.fdw-subtitle{ font-size:0.8em; margin-top:-20px; color:#0CF; }
	.fdw-subtitle a{ color:#F90; }
	.c-two{ width:314px !important; }
	.a-center{ text-align:center; }
	.border{ border:1px solid #CCC; margin:-1px;}
	/*link buttons*/
    .fdw-port a{ 
		-webkit-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
		-moz-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
		box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
		-o-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
		text-shadow:0 1px 1px #000;
    .fdw-port a:hover{ 
		color:#336699 !important; 
		text-shadow:0 1px 1px #ccc;
		-webkit-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
		-moz-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
		box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
		-o-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;

Now! We have a beautiful image hover effect with jquery and CSS3. Check out the demo below, and feel free to download this example1 for future use.


2. Example 2

In tutorial example 2, we would like to show you jquery mouse hover overlay zoom animate with css style.

jquery hover effect delay style download

This example also jquery min plugin that we content to external google libs and jquery function zoom.

Let's go with my tutorial coding bellow:

The Markup

The jQuery function zoom overlay effect will have the following code:



        hoverZoom: function(settings) {

            var defaults = {
                overlay: true,
                overlayColor: '#2e9dbd',
                overlayOpacity: 0.7,
                zoom: 25,
                speed: 300

            var settings = $.extend(defaults, settings);

            return this.each(function() {

                var s = settings;
                var hz = $(this);
                var image = $('img', hz);

                image.load(function() {

                    if(s.overlay === true) {
'); $(this).parent().find('.zoomOverlay').css({ opacity:0, display: 'block', backgroundColor: s.overlayColor }); } var width = $(this).width(); var height = $(this).height(); $(this).fadeIn(1000, function() { $(this).parent().css('background-image', 'none'); hz.hover(function() { $('img', this).stop().animate({ height: height + s.zoom, marginLeft: -(s.zoom), marginTop: -(s.zoom) }, s.speed); if(s.overlay === true) { $(this).parent().find('.zoomOverlay').stop().animate({ opacity: s.overlayOpacity }, s.speed); } }, function() { $('img', this).stop().animate({ height: height, marginLeft: 0, marginTop: 0 }, s.speed); if(s.overlay === true) { $(this).parent().find('.zoomOverlay').stop().animate({ opacity: 0 }, s.speed); } }); }); }); }); } }); })(jQuery);

The Cascading Style Sheets (CSS) example2 will have the following structure:

.block { width:293px; height:170px; float:left; margin:0 40px 0 0; }
.last { margin-right:0; }
.zoom { 
    border:1px solid #ddd; 
    background:#fff url(../images/loader.gif) no-repeat center;
.zoom img { display:none}
.zoomOverlay {
            top:0; left:0;
            bottom:0; right:0;

Now! We have a beautiful jquery image hover effect zoom overlay animation with jquery and CSS. Check out the demo below, and feel free to download this example2 for future use.

Graham Bill's expertise in web design and his specialization in WordPress sites and blogs. With over a decade of experience, he likely possesses a deep understanding of the web design industry and the latest trends in WordPress development. Graham's blog, filled with helpful tips and tricks, is a valuable resource for those interested in improving their web design skills or optimizing their WordPress sites and blogs. Sharing his expertise through informative articles likely showcases his commitment to providing value to the web design community.