473,841 Members | 1,837 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Can I make an image rollover that enlarges the image?

23 New Member
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 2339
8,658 Recognized Expert Moderator Expert
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
2 New Member
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); }
  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); }
  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>
  30. </style>
Jul 3 '12 #3
ariful alam
185 New Member
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
8 New Member
make both images the same size, but make the "smaller" image transparent on it's edges.
Jul 6 '12 #5
ariful alam
185 New Member
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>
  14. <body>
  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;'>
  21. </body>
  23. </html>
The following Code works on Opera 11.61, Mozilla Firefox 10.0.2

Expand|Select|Wrap|Line Numbers
  1. <html>
  3. <head>
  4.     <title>Image Rollover</title>
  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>
  17. <body>
  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;'>
  24. </body>
  26. </html>
Jul 8 '12 #6

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

Similar topics

by: Laszlo Zsolt Nagy | last post by:
I would like to load image from a directory right into an image list. I wrote a simple library that loads the images in the directory and resizes them as needed before adding to the wx.ImageList. This is not the same code but some snippets. I resize the image this way (using Python Imaging Library): def resizeimage(image,newsize): oldsize = (image.GetWidth(),image.GetHeight()) if oldsize != newsize:
by: Bob Sanderson | last post by:
1) Image "A" appears when page is opened 2) When mouse is rolled over Image "A" it is replaced with image "B" 3) Image "B" has an image map on it. Can this be done?
by: Ester | last post by:
Instead of drag and drop image button from Toolbox and name the image button id on the properties box, I would like to load image button ID from database. I created a database table that stores Image Button ID and Image (path name of the image for the image button). Example of the data will be: (ImgBtnLight, image\light.gif). The data type of the Image Button ID field in the database table is varchar whereas data type of image button in...
by: Novice | last post by:
I'm afraid I will incur the wraith of Mr. Powell on this one - but I did read his #1 FAQ and some others and I still can't figure this out. I created this little c# app. and I have a PictureBox in my Form. I load this image from the filesystem into the PictureBox and then I draw random little lines on the image. Then when I minimize and reopen the application the little lines are gone. Is there a way to save my lines in memory and...
by: Suraj Joneja | last post by:
Hi All, I've an image control on my ASP.net page. This displays an image named 'Logo.jpg' in the location '~\Images'. Another application can change this image. It can select any image and upload to the folder 'Images' and newly selected image would overwrite existing image 'Logo.jpg'. (Image name remains same and image changes). The image control on my page doesn't refresh the newly selected image. it displays the old image where as the...
by: steve | last post by:
Hi All When I set a buttons image to a image file in the properties window it seems to lock the file even if I clear the button image property in the properties window Sometimes I am editing the icon/bitmap and connect it to the button to see what it looks like Then I want to make further changes so I clear the image from the buttons
by: modermo | last post by:
Hey new to javascript figuring out how to fix this darn problem. I employ an image rollover, and it works beautifully in safari. But in firefox, the image has an annoying blue border around it, which i didnt specify. Further to that, when I click it, it should lead straight into another site/window. But when i click it, another totally irrelevant image pops up. Its only when i click it again that it the link takes me to another site. ...
by: Casimir | last post by:
I am looking into making pure CSS image rollovers. Do you have any clever (and robust) CSS rollover-tricks? Or links to such "in the wild"? I have figured out two methods for this, but have yet to do proper testing on browser support. Method I:
by: mrking | last post by:
Hello, I have a test site running at http://artbymichaelking.com/DS/ As you can see with the navigation I have the image rollover. I do this with CSS via: .companyrollover a{ display: block; width: 95px;
by: mrking | last post by:
Before I go ahead and implement this I need to confirm that what I want can be done. The standard image rollover works well, however this time I want to modify it to show the current selected button as the rollover would be until the next menu item is clicked. IE, lets say I have two buttons Company Contact non active state has the image text in grey, rolled over image text is red.
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.