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;
    padding: 250px 250px 150px 150px;
    color: #000;
    margin: 200px;

p {

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

a.rollover:hover > img {
    height: 240px; 
    width: 240px;

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


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

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


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

Please help!

Edited by Nick Evan: Fixed formatting

7 Years
Discussion Span
Last Post by almostbob

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.