By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,279 Members | 520 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,279 IT Pros & Developers. It's quick & easy.

Can I make an image rollover that enlarges the image?

mariko
P: 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
Share this Question
Share on Google+
5 Replies

Dormilich
Expert Mod 5K+
P: 8,639
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

P: 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
100+
P: 185
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

P: 8
make both images the same size, but make the "smaller" image transparent on it's edges.
Jul 6 '12 #5

ariful alam
100+
P: 185
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.