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?

Jul 5 '10 #1

Follow Post Reply

2087

Dormilich

8,658

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

lloydwiddowson

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

 <td bgcolor="#000000"></p>

    <style type="text/css" >

.rollover a {        display : block;

                     width : 800px;

                     height : 124px;

                     background-image:url(http://www.eurovisionimports.com/stockimage1.jpg); }
 
.rollover a:hover {   display : block;

                      width : 800px;

                      height : 429.86px;

                      background-image:url(http://www.eurovisionimports.com/har...rollover.gif); }

</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(http://www.eurovisionimports.com/stockimage2.jpg); }
 
.rollover b:hover {   display : block;

                      width : 800px;

                      height : 441px;

                      background-image:url(http://www.eurovisionimports.com/stockimage2roll.gif); }

</style>

<div class="rollover" > <a href="http://www.eurovisionimports.com/item2.html"></a> </div>
 
</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

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

 
<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

Expand|Select|Wrap|Line Numbers

 
<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>

Jul 8 '12 #6

Can I make an image rollover that enlarges the image?

Post your reply

Similar topics