Member Avatar for designer09

I need a really fast reply because I need to turn my site in tomorrow to my professor, and she doesn't know how to fix this issue:

I am trying to get my images to enlarge when the mouse cursor hovers over them. Then when the cursor moves off of the image, it returns it its size. Instead, selective images are enlarging, while others remain the same size and the cursor spazzes out.

CSS code:
@charset "UTF-8";
/* CSS Document */

body {
    font-family: Verdana, Arial Black, Trebuchat MS, Arial, Geneva;
    background-image:url(images/template.jpg);
    background-repeat:no-repeat;
    background-position:center;
    padding: 250px 250px 150px 150px;
    color: #000;
    margin: 200px;
}


p {
    padding-left:inherit;
    padding:inherit;
}



a.rollover img {
    width: 100px;
    height: 100px;
    float: left;
}

a.rollover:hover > img {
    height: 240px; 
    width: 240px;
    margin-left:100px;
}


A:link {color:#333; text-decoration:none; }
A:hover {color:#000; text-decoration:underline; }







HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Welsch Designs</title>
<link href="index.css" rel="stylesheet" type="text/css" />

</style>


</head>
<body>
<a href="http://www.welschdesigns.com/eyes" class="rollover"><img src="images/eyes.jpg" /> </a>
<a href="http://www.welschdesigns.com/cautionbg" class="rollover"><img src="images/background.jpg" /> </a>
<a href="http://www.welschdesigns.com/background2" class="rollover"><img src="images/background2.jpg" /> </a>
<a href="http://www.welschdesigns.com/beachball" class="rollover"><img src="images/beachball.jpg" /> </a>
<a href="http://www.welschdesigns.com/template" class="rollover"><img src="images/bgoption3.jpg" /> </a>
<a href="http://www.welschdesigns.com/button" class="rollover"><img src="images/button.jpg" /> </a>
<a href="http://www.welschdesigns.com/cigsmoke" class="rollover"><img src="images/cigsmoke.jpg" /> </a>
<a href="http://www.welschdesigns.com/globe" class="rollover"><img src="images/globe.jpg" /> </a>
<a href="http://www.welschdesigns.com/header" class="rollover"><img src="images/header.jpg" /> </a>
<a href="http://www.welschdesigns.com/header2" class="rollover"><img src="images/header2small.jpg" /> </a>
<a href="http://www.welschdesigns.com/header3" class="rollover"><img src="images/headersample.jpg" /> </a>
<a href="http://www.welschdesigns.com/journal" class="rollover"><img src="images/journal.jpg" /> </a>
<a href="http://www.welschdesigns.com/logo" class="rollover"><img src="images/logofolio.jpg" /> </a>
<a href="http://www.welschdesigns.com/montage" class="rollover"><img src="images/montage.jpg" /> </a>
<a href="http://www.welschdesigns.com/marble" class="rollover"><img src="images/marble.jpg" /> </a>
<a href="http://www.welschdesigns.com/ocean" class="rollover"><img src="images/ocean.jpg" /> </a>
<a href="http://www.welschdesigns.com/pumpkin" class="rollover"><img src="images/pumpkin.jpg" /> </a>
<a href="http://www.welschdesigns.com/sillouhette" class="rollover"><img src="images/sillouhette.jpg" /> </a>
<a href="http://www.welschdesigns.com/tuscany" class="rollover"><img src="images/tuscany.jpg" /> </a>
<a href="http://www.welschdesigns.com/witch" class="rollover"><img src="images/witch.jpg" /> </a>
</body>
</html>

Please help!

Edited by Nick Evan because: Fixed formatting
  • 3 Contributors
  • 2 Replies
  • 82 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for ko ko

Try this:

a {
     width: 245px; /* at least your image size when hover */
     height: 245px; /* at least your image size when hover */
     float: left;
     display: block
    }
a:hover img {
    width: 240px; /* be careful that width must not larger than it's container width 245px */
    height: 240px; /* be careful that height must not larger than it's container height 245px */
   float: left; /* no margin need, it will force to move another image */
   }

Hope this will help. Good luck..

Member Avatar for almostbob 
a.rollover > img:hover { height:240px; width:240px; margin-left:100px; }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.