469,300 Members | 2,210 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,300 developers. It's quick & easy.

Can I make an image rollover that enlarges the image?

mariko
23
I have some pictures on a web page and I want them to "get bigger" when the mouse hovers over them. With the little research I've done, it seems like it would be a rollover effect and something I can do with CSS. I don't want to use javascript. The coding seems to need an image that is divided into the number of needed effects. But that would be problematic because I want images of different sizes and the source image couldn't be split into the necessary sizes using just the depth or just the width of the image. Is there a way for me to have an enlarged image appear as a hover effect?
Jul 5 '10 #1
5 2010
Dormilich
8,651 Expert Mod 8TB
I’d try setting the width and height of the image by CSS.

if that doesn’t work, the only thing in mind is using background images and changing width/height/background-image on :hover.
Jul 6 '10 #2
Not sure if this will help, but by using the hover you can use a larger version of the same image, or any image you want to replace the first one with.

Expand|Select|Wrap|Line Numbers
  1. <td bgcolor="#000000"></p>
  2.     <style type="text/css" >
  3. .rollover a {        display : block;
  4.                      width : 800px;
  5.                      height : 124px;
  6.                      background-image:url(http://www.eurovisionimports.com/stockimage1.jpg); }
  7.  
  8. .rollover a:hover {   display : block;
  9.                       width : 800px;
  10.                       height : 429.86px;
  11.                       background-image:url(http://www.eurovisionimports.com/har...rollover.gif); }
  12. </style>
  13. <div class="rollover" > <a href="http://www.eurovisionimports.com/item1.html"></a> </div>
  14. <br />  
  15. </style>
  16. <style type="text/css" >
  17. .rollover b {        display : block;
  18.                      width : 800px;
  19.                      height : 124px;
  20.                      background-image:
  21. url(http://www.eurovisionimports.com/stockimage2.jpg); }
  22.  
  23. .rollover b:hover {   display : block;
  24.                       width : 800px;
  25.                       height : 441px;
  26.                       background-image:url(http://www.eurovisionimports.com/stockimage2roll.gif); }
  27. </style>
  28. <div class="rollover" > <a href="http://www.eurovisionimports.com/item2.html"></a> </div>
  29.  
  30. </style>
Jul 3 '12 #3
ariful alam
185 100+
You said, you have several images on your webpage. And you don't like to use JavaScript. Then, you have to write hover settings for each image (if every image has individual hover image).

I think this is not useful to you. but if you use JavaScript, you can send parameter to one JavaScript function by hover on image to show individuals big hover image.
Jul 5 '12 #4
ddyer
8
make both images the same size, but make the "smaller" image transparent on it's edges.
Jul 6 '12 #5
ariful alam
185 100+
The following code works on Google Chrome 20.0, Safari 5.1.2:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <title>Image Rollover</title>
  4.     <style type="text/css">
  5.         body:hover { background: url("wlbigielogo.gif") no-repeat center center; }
  6.         h1:hover   { color: red; }
  7.         img        { vertical-align: middle; }
  8.         /*.zoom img  { zoom: 0.5; }*/
  9.         img:hover  { zoom: 2.0; cursor: hand; }
  10.         img.spacer { width: 0px; height: 30px; }
  11.     </style>
  12. </head>
  13.  
  14. <body>
  15.  
  16.     <img id='im1' class='im' src='01.jpg' style='width:220px; height:150px;'>
  17.     <img id='im2' class='im' src='02.jpg' style='width:220px; height:150px;'>
  18.     <img id='im3' class='im' src='03.jpg' style='width:220px; height:150px;'>
  19.     <img id='im4' class='im' src='04.jpg' style='width:220px; height:150px;'>
  20.  
  21. </body>
  22.  
  23. </html>
  24.  
The following Code works on Opera 11.61, Mozilla Firefox 10.0.2

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4.     <title>Image Rollover</title>
  5.  
  6.     <style type='text/css'>
  7.         img:hover{
  8.             position:absolute;
  9.             top:150px;
  10.             left:100px;
  11.             width:600px;
  12.             height:400px;
  13.         }
  14.     </style>
  15. </head>
  16.  
  17. <body>
  18.  
  19.     <img id='im1' class='im' src='01.jpg' style='width:220px; height:150px;'>
  20.     <img id='im2' class='im' src='02.jpg' style='width:220px; height:150px;'>
  21.     <img id='im3' class='im' src='03.jpg' style='width:220px; height:150px;'>
  22.     <img id='im4' class='im' src='04.jpg' style='width:220px; height:150px;'>
  23.  
  24. </body>
  25.  
  26. </html>
  27.  
Jul 8 '12 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Laszlo Zsolt Nagy | last post: by
2 posts views Thread by Bob Sanderson | last post: by
6 posts views Thread by Suraj Joneja | last post: by
2 posts views Thread by Casimir | last post: by
2 posts views Thread by mrking | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.