Rollover image size and position causing misery :-(

HTML & CSS
1

http://codepen.io/Pingbat/pen/xbBQqE

Hi from York UK :smile:

Ive been following this tutorial and trying to add it into a home page I’m building. This link illustrates the problem i’m getting:

934×722 85.9 KB

Basically ive got 3 problems: I cant get the rollover images to keep to there 500px dimension, i cant position / control the rollover images so they appear in position and shrunk, and finally I get a bit of odd white space to the right of the images I’d like to tighten up.

Any insights how I can begin to tame how the rollover images appear would be much appreciated. Please note i’m back Tuesday to answer any questions that might pop up.

Grazie mille,
David

2

Can you verify your email address on Codepen so we can see the full page version?

3

Works for me? What browser?

Look at this rule, which controls the positioning - ul.enlarge li:hover span

The container lines up perfectly on the edge. The last image in each row just doesn’t line up there. Maybe float those <li> right.

4

In the meantime I try to understand your problems;
1 They rollover at different sizes? Can’t see that.
2 Appear in which position and shrunk? Rollout shrunk?
3 White space at the right? Can’t see that.

Might look simple to grasp for you. To me there are infinite options, will take for ever to decide I’m afraid. So i’m not here yet.

5

I just realized you don’t need to float the images, instead of your inline-block. You can simply set text-align:right; on “ul.enlarge”

Just saw…FF works right, but Chrome doesn’t.

745×422 58.3 KB

Fixed with my text-align:right; though.

6

It depends on where you want to display the images, but moving the positioin:relative from the LI to the UL works. It’s basing the width off the LI.

I dunno where you want it to be displayed. It might make sense to do that fix, it might now.

7

HI Chris,

I have just verified codepen :slight_smile:

8

Hi Ryan,

Got some answers for you:

Q1. Works for me? What browser?
A1: Google Chrome version 43.0.2357.65 (64-bit) But notice in Firefox 38.0.1 no problem, images render at desired 500px dimensions. Looks like Chrome doesnt like by enlarge image work :frowning:

Q2. Look at this rule, which controls the positioning - ul.enlarge li:hover span
A2. Well i digged out that bit of code (see below) and messed about with the position and yes i can now control the position thank you :slight_smile:

top: -400px; /the distance from the bottom of the thumbnail to the top of the popup image/
left: -20px; /*distance from the left of the

Q3. The container lines up perfectly on the edge. The last image in each row just doesn’t line up there. Maybe float those

  • right.

    A.3…

    Ran out of time will pick rest of fixes up tomorrow but I can see progress thank you so much!
    David

    • 9

    Thank you. Don’t float that right. Set the text-align instead, like I suggest.

    Let us know tomorrow what other issues you have. I can revisit it tomorrow with Chrome. I did give a solution for that, I think. Either way, play with it and let us know.

    10

    730×572 39.5 KB

    Hi Ryan & thank you for taking time out to take a look at my design woes! Ok may I ask … is the idea to replace line 198 of the CSS with text-align:right; and delete float-right? I tried this in codepen (see above link) and not much happened.

    Any advice welcome :slight_smile:

    11

    You didn’t do as I asked. Please re-read post #5 and try again.

    12

    OK no problem will try tomorrow and update :slight_smile:

    13

    http://codepen.io/Pingbat/pen/xbBQqE

    Thanks Ryan :slight_smile: Your text-align solution worked! Grazie mille!!

    14

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.