Transparant Overlay onto NivoSlider - help!?

HTML & CSS
1

Hi All,

First post here so be gentle!

Am trying to build my friends pub website for him and have run into a bit of a mountain. I am using NivoSlider for the slideshow and want to float a div over it with a transparent background. For now I am just using a block colour background and slideshow next to each other, but its just ugly!

Example:

[URL=“http://deadspacedesign.co.uk/warwick/”]http://deadspacedesign.co.uk/warwick/

When I managed to float the div over thefull width slideshow in this page http://deadspacedesign.co.uk/warwick/gallery.html after each transition, the div would dissapear and fade in with the next slide. I think it may have something to do with the z-index but my limited knowledge has got me nowhere!

Any help would be greatly appreciated

2

Thanks for the help guys, managed a bit of a botched workaround in the end with help from my friend.

www.deadspacedesign.co.uk/warwick

3

Major progress!! Thank you so much.

http://deadspacedesign.co.uk/warwick/about.html

Just need to sort the positioning out now, absolute positioning isnt working with this as the rest of the site moves when the window is resized, any ideas?

Thanks for previous input hugely!

4

Ah, I see.

Keep the images full width and try something like this:

#Splitter {
	border:1px solid #666666;
	position:relative;
	height: 458px;
}

#Content {
	padding:20px;
        position:absolute;
        right:0;
        top:0;
	font-size: 1em;
	height:418px;
	width:240px;
	color: #fff;
        background:rgba(0,0,0,0.3);
}

The last rule uses a partially transparent background color, but it won’t work in all browsers, so you could instead use a semi-transparent image for the background.

5

That’s just the way absolute positioning works :). Your best bet would be to remove the absolute positioning :slight_smile: (I haven’t take na look at the site to see if it’s neccessary, but most of the time it isn’t.)

6

Hi sho0sh, welcome to SitePoint! :slight_smile:

To be honest, I haven’t a clue what you are trying to do. Unless I’m missing something, you haven’t said what the overlay div is meant to do?

7

Hi Ralph,

Thanks for your reply, this is a mockup of what I am trying to do…