Odd rollover/hover "bleeding" problem

[Anthrogue]

General issue, how does a roll over (hover effect) bleed off the thumbnail to extreme right and left. I.e. the pop up effect happens when the cursor is not over the image per se.

Specifically I'm trying to make a gallery thing, using two different CSS image gallery examples I found here. One works of small thumbnails to throw an image over another which is much larger. It seems to be working fine.

Then another script/example controls the pop up for the large central image.

You can see the problem here <<< hold cursor to right and left of the large centre image. I'm trying to fix the hover/rollover effect to only happen when the cursor is over the image... and lookin' for a clue after spending half yesterday pulling my hair ;/

Yeah, somehow the effect is "bleeding" off the image to the right and the left into "empty" space

[Deadweight]

Ummm what web browser do you suggest i look at this?
Also, what are trying to completely accomplish?
Wait i think i see what you mean. The mouse is not completely on top of the image and the size still increases =P
Am i right?

[Anthrogue]

So far I have been looking at it in Chrome and Firefox 3.6.17

Yes.. that is the main glitch. The large central image: the rollover/hover effect happens when cursor is to left and right of that image but not really "on" it. Clueless here as to why

[Deadweight]

Ok one sec i have to get my Dreamweaver to work again. That will allow me to view you code much more easy without coping and pasting code. It will also allow me to edit the code and change your page. (Not directly)

[Deadweight]

Ok i think i have what you are looking for >.<
You have:

.hovergallery { /* same as above 4 main single static */

	clear: right;

	padding-top: 5px;

	padding-bottom: 0px;

	padding-right: 0px;

	padding-left: 110px;

}

Change the code to this:

.hovergallery { /* same as above 4 main single static */

	clear: right;

	margin-top: -365px;

	margin-bottom: 0px;

	margin-right: 0px;

	margin-left: 110px;

}

That is in your head tag


This is in your body tag:

<br style="clear:left"  />



<a class="thumbnail" href="#thumb"><img src="placeImages/aoSmith3thumb.jpg" width="112px" height="112px" border="0" /><span><img src="placeImages/aoSmith3.jpg" /><br />So real, it's unreal. Or is it?</span></a>



<br style="clear:left"  />



<a class="thumbnail" href="#thumb"><img src="placeImages/aoSmith4thumb.jpg" width="112px" height="112px" border="0" /><span><img src="placeImages/aoSmith4.jpg" /><br />Sushi for dinner anyone?</span></a> 



</div>

<div class="hovergallery">

<a class="hovergallery" href="http://www.aosmith.com/" target="_blank""><img src="placeImages/aoSmith1.jpg" alt="orig" class="resize_orig" /><span>

<img src="placeImages/aoSmith1.jpg" /><br />

The lobby was transformed into a contemporary corporate reception area and <br />exhibit space including the &quot;Wall of Innovation&quot;.</span></a>

</div>

Change to:

<br style="clear:left"  />



<a class="thumbnail" href="#thumb"><img src="placeImages/aoSmith3thumb.jpg" width="112px" height="112px" border="0" /><span><img src="placeImages/aoSmith3.jpg" /><br />So real, it's unreal. Or is it?</span></a>



<br style="clear:left"  />



<a class="thumbnail" href="#thumb"><img src="placeImages/aoSmith4thumb.jpg" width="112px" height="112px" border="0" /><span><img src="placeImages/aoSmith4.jpg" /><br />Sushi for dinner anyone?</span></a> 

<div class="hovergallery">

<a class="hovergallery" href="http://www.aosmith.com/" target="_blank""><img src="placeImages/aoSmith1.jpg" alt="orig" class="resize_orig" /><span>

<img src="placeImages/aoSmith1.jpg" /><br />

The lobby was transformed into a contemporary corporate reception area and <br />exhibit space including the &quot;Wall of Innovation&quot;.</span></a>

</div>

</div>

Tell me if that is what you want

.... The large central image: the rollover/hover effect happens when cursor is to left and right of that image but not really "on" it. Clueless here as to why

Do you want me to fix that problem also?

[Anthrogue]

Wow... that appears to fix the problem. And thanks for catching the other unclosed Div. Looking good with that behaviour fiXored.

So... Thanks a milllion. But can you school my n00btastic ignorance here - Lol, I'm not sure why it was fixed. The change to the .hovergallery thing to margin-top -365 <<< counter intuitive for somebody just trying to get more advanced using CSS

I mean how does something like that effect/fix the bleeding, empty space to left and right of the base/thumb image?

[Deadweight]

Because when you use the padding code it actually is making a "pad" or space around or to the left as you had it. Does that make sense? Also do you want me to try and fix the align problems? One easy way you can try and fix them is in the

.hovergallery { /* same as above 4 main single static */

	clear: right;

	margin-top: -365px;

	margin-bottom: 0px;

	margin-right: 0px;

	margin-left: 110px;

}

Play around with the margins.


Is there anything else you need help with?

[Anthrogue]

I think all is cool... thanks for offer. The logic will be inserted into another, transformed design framework. I was just trying to sort and nail the idea.

Thanks again... you learned me somethin' bro