Logo Overlay – Z INDEX – Photography Page – SOLVED.

[hendrix940]

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!!

[David_Leitch]

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?

[stevencrader]

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;
}

[shashi5g]

thanks
stevencrader

[David_Leitch]

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

[hendrix940]

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

[hendrix940]

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

[stevencrader]

@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?

[hendrix940]

The logo sir.

[stevencrader]

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.

[hendrix940]

Great! Thanks @stevencrader!

[Author]

Posts