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.
Hi there bsfns5,
here is one possible solution…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
.img-holder {
max-width: 6em;
padding: 0.25em;
margin: auto;
border: 0.062em solid #999;
background-color: #fff;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.0 ),
0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.3 );
transition: 0.5s ease-in-out;
}
.img-holder img {
display: block;
width: 100%;
height: auto;
border: 0.062em solid #000;
box-sizing: border-box;
transition: 0.5s ease-in-out;
}
.img-holder:hover {
max-width: 32em;
padding: 1em;
border-radius: 0.75em;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ),
0.5em 0.5em 0.5em rgba( 0, 0, 0, 0.3 );
}
.img-holder:hover img {
border-radius: 0.5em;
}
</style>
</head>
<body>
<div class="img-holder">
<img src="http://coothead.co.uk/images/gaze.gif" width="500" height="295" alt="looking at you">
</div>
</body>
</html>
coothead
Thank you so much for your response. The code works well. The problem that I find is that the code leaves a large square gray box around the image. Unfortunately, I cannot add text near the image because of this box. When I reduce the size of the box, this negatively affects the zoom.
What I am trying to do is add a code similar to this one in my New Google Sites. Do you have any other suggestions for me? Thanks.
Hi there bsfns5,
does this help…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
.img-holder {
max-width: 6em;
padding:0.25em;
margin: auto;
border: 0.062em solid #999;
background-color: #fff;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.0 ),
0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.3 );
transition: 0.5s ease-in-out;
}
.img-holder img {
display: block;
width: 100%;
height: auto;
border: 0.062em solid #000;
box-sizing: border-box;
transition: 0.5s ease-in-out;
}
.img-holder div {
height: 0;
text-align: center;
overflow: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
}
.img-holder:hover {
max-width: 32em;
padding: 1em 1em 0.5em;
border-radius: 0.75em;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ),
0.5em 0.5em 0.5em rgba( 0, 0, 0, 0.3 );
}
.img-holder:hover img {
border-radius: 0.5em;
}
.img-holder:hover div {
height: auto;
padding-top: 0.25em;
opacity: 1;
}
</style>
</head>
<body>
<div class="img-holder">
<img src="http://coothead.co.uk/images/gaze.gif" width="500" height="295" alt="looking at you">
<div>image description</div>
</div>
</body>
</html>
coothead
Hi bsfns5,
In addition to @coothead 's fine example, there is also another way to enlarge your images by using transform with scale.
transform:scale();
It will give you an effect that is similar to a lightbox or modal, in that it does not push on other content around the image when hovered for zoom. However, it can be difficult to keep it in view if you scale it too much.
Here is a zip file with the example and demo image I used.
image-scale.zip (48.5 KB)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Transform Zoom</title>
<style>
.wrap {
max-width:900px;
margin:auto;
}
.zoom {
width:60%;
max-width:480px;
margin:auto;
padding:1em;
background:#ccc;
border-radius:10px;
text-align:center;
}
.zoom img {
display:block;
margin:0 0 1em;
max-width:100%;
height:auto;
border-radius:10px;
transition:transform 0.5s;
}
.zoom img:hover {
transform:scale(1.7) ;
}
</style>
</head>
<body>
<div class="wrap">
<p>Lorem ipsum dolor sit amet consectetuer Sed et Mauris nisl feugiat. Leo ut eget at lorem tellus
laoreet dis convallis enim feugiat. Ligula sit Vivamus porttitor nibh nec mattis Nulla interdum.</p>
<p>Est risus libero ante dapibus pretium auctor condimentum consequat quis Lorem. Aliquet dui
nascetur iaculis dui Sed at et ac eleifend a. Sed orci pede et.</p>
<figure class="zoom">
<img src="gilmour.jpg" width="480" height="320" alt="David Gilmour">
<figcaption>Mouseover image to enlarge</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet consectetuer Sed et Mauris nisl feugiat. Leo ut eget at lorem tellus
laoreet dis convallis enim feugiat. Ligula sit Vivamus porttitor nibh nec mattis Nulla interdum.</p>
<p>Est risus libero ante dapibus pretium auctor condimentum consequat quis Lorem. Aliquet dui
nascetur iaculis dui Sed at et ac eleifend a. Sed orci pede et.</p>
</div>
</body>
</html>
[code]
bla bla bla .zoom { width: 180px; height: 180px; padding: 50px; margin: 0 auto; background-color: green; transition: transform .2s;}
.zoom:hover {
transform: scale(1.5);
}
Thanks, Coolhead. I really like this code. But all the issues as previously described remain.
Hi Ray. Thank you for your response. Unfortunately, the code isn’t rendering correctly on my site.
I am sorry, but I really do not know what those issues are?
Can you elucidate further?
coothead
In what way is it not rendering correctly? Which browser and OS are you using? I see no problem with it using Firefox on Ubuntu Gnome.
Have you given us a link to your test site?
If not, would you please do so? I feel that there must be some code that we are not aware of.
The code works well. The problem that I find is that the code leaves a large square gray box around the image. Unfortunately, I cannot add text near the image because of this box. When I reduce the size of the box, this negatively affects the zoom.
Which one is your code? I use Google Chrome on Windows 10.
I don’t have a code on my site. All the codes that I am experimenting with are on this thread.
You replied to @Ray.H, saying his code did not render correctly. I tried that code and found it performed as expected.
I’m really not sure what you mean by being unable to add text near the image. Can you post screen shots of what you want to achieve, and what is actually happening?
2 Likes
Assuming that you want to use the code you are asking for on this site that you mentioned in your first message, please post a link to that site so we can see where the code will be used.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.