Forums

  • # May 9, 2013 at 9:36 am

    Edit: Scroll down to my most recent post to see what’s up. Thanks!

    Okay, so I have two fairly simple questions. I am working on a gallery, here. Scroll down until you see the photographs.

    On rollover, some information pops up about each individual photograph, but I lose the image link when this happens. You have to be quick to click the image before the text scrolls up to see the image in full. How do I retain the link to the image even after the text scroll?

    Secondly, I want to have five pictures span the width of the site. I measured everything so that I could do this. I am using :last-child so that the image at the end of a row will not have ten pixels of right margin. But how do I define the last child of a row? I tried to create a container div called image-row, but that seemed to screw up my website for some reason. I know I can create a second div called something like image-box-last and just give it its own properties and use that div at the end of each row in the HTML, but is there a better way to do this?

    Thank you in advance!

    # May 9, 2013 at 9:47 am

    Instead of adding right margin and removing it from the last one, add left margin and remove it from the first one?

    # May 9, 2013 at 9:49 am

    Alternatively you could use nth-child

    # May 9, 2013 at 11:28 am

    As for your first question, simply alter your markup and have the anchor wrap around everything.

    I have a little trick for you for your second problem. Basically, you wrap all of the image divs in a wrapper, call it whatever you like. Give that div enough room to fit all of your divs + margins inside of it but then give it a negative margin to bring it back to 960px.

    It’ll look something like this: http://codepen.io/ggilmore/pen/bbd121b060400333d6ce7d886c47bbe6

    # May 9, 2013 at 11:46 am

    Perhaps ‘nth-of-type’

    http://codepen.io/Paulie-D/pen/Cxwma

    # May 9, 2013 at 12:11 pm

    Yup. Or you could wrap the anchor around your `h4` and `p` in the `.image-details` div as well.

    # May 9, 2013 at 5:46 pm

    I think you have unclosed `

    ` tags so for whatever reason Chrome is listing the link twice in the Inspector (which would certainly cause the plugin to load the image twice).

    Also, you still have a problem that when the thing scrolls, you have to hover over the text to actually click the link.

    I’d probably go like this:

    and the CSS:

    .image-container {
    position: relative;
    }

    .image-container a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    }

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag