Grow your CSS skills. Land your dream job.

Logo Overlay – Z INDEX – Photography Page – SOLVED.

  • # December 17, 2012 at 12:14 am

    Hi all, I’m trying to overlay a logo on top of the bottom right corner of the main photo gallery slider and having no success!!

    I have uploaded the logo and saved in a .png format with a transparent background:

    And here is the site:

    Thanks so much for the help!!

    # December 17, 2012 at 12:45 am

    Hi there,

    I’ve just had a play around with it on [CodePen](http://codepen.io/joe/pen/kLBnr “http://codepen.io/joe/pen/kLBnr”), using absolute positioning to get it in the right spot, while maintaining responsiveness. Not sure if it’s exactly what you’re after but could serve as a starting point :)

    Perhaps there’s a better solution that doesn’t use absolute positioning?

    # December 17, 2012 at 2:31 am

    You could try this.

    Add the image right before the Nivo Slider div

    Give the image a class. I used image-overlay and apply the following style:

    .image-overlay{
    position: absolute;
    z-index: 9999;
    top: 575px;
    right: 70px;
    }

    # December 21, 2012 at 5:52 am

    thanks
    stevencrader

    # December 21, 2012 at 9:01 am

    I will just note that instead of positioning the logo from the top as Steven has done, I would position it from the bottom, as I did in [my version](http://codepen.io/David_Leitch/pen/orhic “http://codepen.io/David_Leitch/pen/orhic”). By doing this, it will stay in the correct position, even if you change the dimensions of the photo/container

    # December 22, 2012 at 11:39 am

    @stevencrader and @david_leitch … thank you both. I’ll be trying both versions right now!!

    # December 22, 2012 at 6:00 pm

    Does anyone know how to change the opacity of the image? @stevencrader or @david_leitch? Thanks!

    # December 22, 2012 at 6:11 pm

    @hendrix940

    The point David makes is a great one if you are going to have different sized images or make the site responsive.

    Opacity of which image? The logo or the gallery images?

    # December 22, 2012 at 10:31 pm

    The logo sir.

    # December 23, 2012 at 1:40 am

    Use the opacity tag: `opacity: .3;` The number must be between 0 and 1.

    Word of warning: when using the opacity tag anything inside of the tag will receive the opacity. It isn’t a big deal with the img tag but is if used on a div with elements inside.

    # December 23, 2012 at 11:47 am

    Great! Thanks @stevencrader!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".