I've just had a play around with it on CodePen, 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?
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. By doing this, it will stay in the correct position, even if you change the dimensions of the photo/container
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.
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!!
Hi there,
I've just had a play around with it on CodePen, 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?
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:
thanks stevencrader
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. By doing this, it will stay in the correct position, even if you change the dimensions of the photo/container
@stevencrader and @david_leitch ... thank you both. I'll be trying both versions right now!!
Does anyone know how to change the opacity of the image? @stevencrader or @david_leitch? Thanks!
@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?
The logo sir.
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.
Great! Thanks @stevencrader!