Scribd
Upload
216 views

How To Add A Zoom Effect To Your Blog Images On Mouse Move

This document discusses how to add a zoom effect to images on a blog using jQuery. It describes a jQuery plugin called "Zoom" that can be used to zoom an image when the mouse hovers over or presses on it. The plugin works by appending HTML to the element it is applied to, so the image must be inside an element like a div or span. Calling the zoom() function on the parent element will zoom the image on hover or grab.

Uploaded by

malaigolok
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
216 views

How To Add A Zoom Effect To Your Blog Images On Mouse Move

This document discusses how to add a zoom effect to images on a blog using jQuery. It describes a jQuery plugin called "Zoom" that can be used to zoom an image when the mouse hovers over or presses on it. The plugin works by appending HTML to the element it is applied to, so the image must be inside an element like a div or span. Calling the zoom() function on the parent element will zoom the image on hover or grab.

Uploaded by

malaigolok
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

How to add a Zoom effect to your blog Images on mouse move

This is very graceful effect that can use to surprise your blog readers. Im sure they all will really love it. Lets see how to insert it to your blog. OK here is the simple trick Logging to your blogger account Go to Edit HTML Search for ]]></b:skin> and place the under mentioned code just above it .bloggers1 img{ -webkit-transform:scale(0.5); /*Webkit 0.7 times the original Image size*/ -moz-transform:scale(0.5); /*Mozilla 0.7 times the original Image size*/ -o-transform:scale(0.5); /*Opera 0.7 times the original Image size*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla Animation duration*/ -o-transition-duration: 0.5s; /*Opera Animation duration*/ opacity: 0.8; margin: 0 10px 5px 0; }

.bloggers1 img:hover{ -webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/ -moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/ -o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/ box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; opacity: 1; } Then.. When you insert image to your blog go to edit html and ad this code before your image url <div class="bloggers1"> After the image url ad </div> Now you are done Save and see what happen.

this zooming effect is a basic effect that most bloggers use in there blogs. in next post i'll tell you a another version of this zooming effect.

How to add a Zoom effect to your blog Images on mouse move


Part II (Optimized Version)

In previous post I show you a really amazing zooming effect that can use to impress your blog visitors, also I told you that Ill show you another inconceivable z ooming effect. This is also like the previous one. But i think this one is cuter than previous one. Lets see how it looks like

How to add this effect


Ok here is how to do it

Simply Search for ]]></b:skin> on Edit Html and place the below mentioned code just above it

.bloggers2 img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;

opacity: 1; margin: 0 10px 5px 0; } .bloggers2 img:hover{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -o-transform:scale(0.9); opacity: 1; }

Tags: How to add zoom, Zoom effect, zoom effect for blog, Image zooming, Picture zooming, Image zooming for blog

Zoom an image on hover using Zoom jQuery plugin


Well one of the popular post of my blog is "How to Zoom image on mouseover using jQuery", which shows how to zoom an image using jQuery. But today, I found a image zoom jQuery plugin which does the same thing but in a different way. You can download this plugin from here. Things to note here is that this the plugin "Zoom" appends html inside the element it is assigned to, so that element has to be able to accept html like a, span, li, div, etc. That means your image tag must be placed inside any of these tags like a, span, li, div to make this plugin work. After that is done, just call the zoom() function on the parent element, not on the image element. For example, I have placed the image tag inside the span tag. view sourceprint?

1 <span class='zoom' id='ex'> 2 <img src='flowers.jpg' width='500' height='300' /> 3 </span>


Now, the zoom() function should be associated with span element, not with image. See below. view sourceprint?

1 $(document).ready(function(){ 2 $('#ex').zoom();

3 });
This plugin by default supports the zoom on mouse over but there is another option available with this plugin. You can also zoom the image by pressing the mouse and holding it. This option is called "Grab" in this plugin. See below code. view sourceprint?

1 $(document).ready(function(){ 2 $('#ex2').zoom({ grab: true }); 3 });

HTML
<span class='zoom' id='ex'> <img src='http://www.allbestwallpapers.com/wallpaper/flower/image/love_blooms_roses,_bunch_of_fl owers.jpg' width='500' height='300' /> </span> CSS .zoom { display:inline-block; position:relative; } .zoom img { display: block; }

JAVASCRIPT $(document).ready(function(){ $('#ex').zoom(); });

You might also like