Enlarge Images When Mouse Hover

Is there an HTML code that I could use on my site that could enlarge images when a viewer hovers over the image with their cursor? Thanks.

 

Are you trying a zoom effect or something like a popup on hover?

Zoom:

https://jsfiddle.net/1n7sm44p/6/

http://jsfiddle.net/Talsja/f6awjwty/

Popup:

http://jsfiddle.net/btevfik/jVCdf/

P.S. Next time simply put something like: jsfiddle enlarge image on hover css in Google search box.

 

Thank you so much! https://jsfiddle.net/1n7sm44p/6/ is perfect! How should I position the html code and css code on my page?

 

Just like the way you see it. Copy the css part and paste it into your .css file and the html part into where you want your image(s) to appear (usually HTML or PHP pages).

 

The problem is that my site was built with the New Google Sites. I am not aware of a css file within the Google Sites. I know how to insert an html code within my site, but I don't know where the css code goes.

 

I don't know either. Never used Google Sites.

 

Well, I understand that there is a way to insert html and css codes on the New Google Sites. I just posted a thread on the Google Sites forum to find out just how to do this.

 

It can be done pretty easily with HTML and CSS using the CSS effect Zoom. You do need to setup the basic CSS with box sizing, background, image height/width/border/etc. and set overflow: hidden.

* {
-webkit-box-sizing:border-box; /*box setup for different browsers*/
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

body {
background:#333;
}

.pic {
border:10pxsolid#fff; /*border size and color*/
float:left;
height:300px; /*set height, width and margin to what you want*/
width:300px;
margin:20px;
overflow:hidden;
-webkit-box-shadow:5px5px5px#111;
box-shadow:5px5px5px#111;
}​

An example of the HTML:

<div class="grow pic">
<img src="path/file/myimg.jpg"alt="myimg">
</div>​

An example of the CSS needed, set Overflow to Hidden:

/*GROW*/
.grow img {
height: 300px; /*You can set height and width to whatever you want */
width: 300px;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.grow img: hover {
width: 400px; /*Set height and width to the zoom size you want*/
height: 400px;
}​

For more ideas on CSS effects, you can look at cloudinary.com's visual web wiki under Image Delivery/CDN, Image Manipulation and Image Filters and Effects.

 

Thank you for your response. I'm not very fluent when it comes to html or css. I built a site on the New Google Sites. I can embed both html and css together. How can I combine the html/css code from your example that I could embed?