Can I make an image rollover that enlarges the image?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mariko
    New Member
    • Mar 2010
    • 23
    #1

    Can I make an image rollover that enlarges the image?

    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?
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      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.

        Comment

        • lloydwiddowson
          New Member
          • Jul 2012
          • 2
          #3
          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.

          Code:
          <td bgcolor="#000000"></p>
    <style type="text/css" >
.rollover a {        display : block;
                     width : 800px;
                     height : 124px;
                     background-image:url([url]http://www.eurovisionimports.com/stockimage1.jpg);[/url] }

.rollover a:hover {   display : block;
                      width : 800px;
                      height : 429.86px;
                      background-image:url([url]http://www.eurovisionimports.com/harleyfatrollover.gif);[/url] }
</style>
<div class="rollover" > <a href="http://www.eurovisionimports.com/item1.html"></a> </div>
<br />  
</style>
<style type="text/css" >
.rollover b {        display : block;
                     width : 800px;
                     height : 124px;
                     background-image:
url([url]http://www.eurovisionimports.com/stockimage2.jpg);[/url] }

.rollover b:hover {   display : block;
                      width : 800px;
                      height : 441px;
                      background-image:url([url]http://www.eurovisionimports.com/stockimage2roll.gif);[/url] }
</style>
<div class="rollover" > <a href="http://www.eurovisionimports.com/item2.html"></a> </div>
    
</style>
          Last edited by Dormilich; Jul 5 '12, 02:23 PM. Reason: Please use [CODE] [/CODE] tags when posting code.

            Comment

            • ariful alam
              New Member
              • Jan 2011
              • 185
              #4
              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.

                Comment

                • ddyer
                  New Member
                  • May 2010
                  • 8
                  #5
                  make both images the same size, but make the "smaller" image transparent on it's edges.

                    Comment

                    • ariful alam
                      New Member
                      • Jan 2011
                      • 185
                      #6
                      The following code works on Google Chrome 20.0, Safari 5.1.2:

                      Code:
                      <html>
<head>
	<title>Image Rollover</title>
	<style type="text/css">
	    body:hover { background: url("wlbigielogo.gif") no-repeat center center; }
	    h1:hover   { color: red; }
	    img        { vertical-align: middle; }
	    /*.zoom img  { zoom: 0.5; }*/
	    img:hover  { zoom: 2.0; cursor: hand; }
	    img.spacer { width: 0px; height: 30px; }
	</style>
</head>

<body>

	<img id='im1' class='im' src='01.jpg' style='width:220px; height:150px;'>
	<img id='im2' class='im' src='02.jpg' style='width:220px; height:150px;'>
	<img id='im3' class='im' src='03.jpg' style='width:220px; height:150px;'>
	<img id='im4' class='im' src='04.jpg' style='width:220px; height:150px;'>

</body>

</html>
                      The following Code works on Opera 11.61, Mozilla Firefox 10.0.2

                      Code:
                      <html>

<head>
	<title>Image Rollover</title>

	<style type='text/css'>
		img:hover{
			position:absolute;
			top:150px;
			left:100px;
			width:600px;
			height:400px;
		}
	</style>
</head>

<body>

	<img id='im1' class='im' src='01.jpg' style='width:220px; height:150px;'>
	<img id='im2' class='im' src='02.jpg' style='width:220px; height:150px;'>
	<img id='im3' class='im' src='03.jpg' style='width:220px; height:150px;'>
	<img id='im4' class='im' src='04.jpg' style='width:220px; height:150px;'>

</body>

</html>

                        Comment

                        Previous template Next
                        Working...