Popup description on image hover

[Staggasaurarts]

hi everyone,

im having some trouble with design im working on.

Basically what i want to achieve is when the user hovers on an image, a semi-transparent black box pops up over the image with a description.

I have tried a few ways but am now stuck for ideas.

My first solution was to make it popup with javaScripts onmouseover but this wouldnt work because the popup then goes over the image so the cursor is now not over the image.

Ive tried doing it the way i make some of my navigation bars with a display:none ul and li menu but again no such luck.

In the words of Jar Jar Binx "Any help here would be hot" :)

Thanks

[Staggasaurarts]

here is a quick flash version of what i am trying to make.

http://staggasaurarts.com/test.swf

[JoshJ47]

What I would do is set the z-index of the image to 0, and then create a second box with the background image as a semi transparent black, and then position it directly over the first image. Then give it a z-index of say 1, and then style it like this:

Example:
#box {
bakground-image: (url);
display:none;
}

#box a:hover {
dislpay:visible; or display:block;
}

[Staggasaurarts]

thanks for the reply, but i came up with this working method.

html:

<div id="tut-img" class="imgbox">
			<img src="images/tut4.jpg" width="340px" class="tutorial-image">
<div class="details">
			<p>In this tutorial we will look at two different ways to create sketch materials that will make your 3D objects seem like 2D. We will also discuss how we can incorporate Sub Polygon Displacement and some other cool features along with that sketchy material.</p>	
			Running Time:: 9mins 20secs<br>
			Level::Intermediate
		</div>
		</div>

css:

.imgbox{
		float:left;
		width:340px;
		height:191px;
		overflow:hidden;
	}
	.details{
		width:320px;
		height:171px;
		padding:10px;
		background:#000;
		color:#fff;
		text-align:left;
	}
	#tut-img{position:relative;}
	#tut-img img{
		opacity:1
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	#tut-img .details{
		position:absolute;
		top:0;
		left:0;
		opacity: 0;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	
	#tut-img .details:hover{
		opacity: .9;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}

[JoshJ47]

Very nice, however, your effect will not show up in firefox or IE, so if that doesn't matter, this will work nicely

[Staggasaurarts]

actually it will work in firefox as that is my main browser, ie i know about, but am working on a workaround and will post it here when i have

[Staggasaurarts]

well that was quick, as soon as i posted the last reply, i remembered how to do it in ie.

.imgbox{
		float:left;
		width:340px;
		height:191px;
		overflow:hidden;
	}
	.details{
		width:320px;
		height:171px;
		padding:10px;
		background:#000;
		color:#fff;
		text-align:left;
	}
	#tut-img{position:relative;}
	#tut-img img{
		opacity:1
		filter: alpha(opacity = 100);
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	#tut-img .details{
		position:absolute;
		top:0;
		left:0;
		opacity: 0;
		filter: alpha(opacity = 0);
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	
	#tut-img .details:hover{
		opacity: .9;
		filter: alpha(opacity = 90);
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}

filter: alpha(opacity = 100);

is all that was needed for opacity support in ie.

And yes i know that it will not fade in on firefox or ie (which i now realise is what you meant) but it doesnt matter.