Results 1 to 8 of 8

Thread: Odd rollover/hover "bleeding" problem

  1. #1
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Odd rollover/hover "bleeding" problem

    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
    Last edited by Anthrogue; 08-13-2011 at 01:57 AM. Reason: problem resolved

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    331
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default

    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?

  3. #3
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    331
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default

    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)

  5. #5
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    331
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default

    Ok i think i have what you are looking for >.<
    You have:
    Code:
    .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:
    Code:
    .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:

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

    Quote Originally Posted by Anthrogue View Post
    .... 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?
    Last edited by Deadweight; 08-12-2011 at 09:26 PM.

  6. The Following User Says Thank You to Deadweight For This Useful Post:

    Anthrogue (08-13-2011)

  7. #6
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #7
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    331
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default

    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
    Code:
    .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?

  9. #8
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •