Forums: Front End:

So, i'm trying to create these divs to be a preview of an article. I've got a container div with a nested div inside alongside a header element with the article title.

I'm using some jQuery fading to hide the image on mouseover and reveal the title, but I'm having problems with the title not staying inside the div....or rather being forced out of my specified height due to the image. I've tried some z-indexing, absolute/relative positioning but no luck.

Any suggestions?

link

relevant css:

<style type="text/css">

h2 {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: #e4e4e4;
   font-size: 16px;
   line-height: 16px;
   margin: 3px;
}

h2 a, h2 a:link, h2 a:visited {
   color: #e4e4e4;
   text-decoration: none;
}

h2 a:hover {
   color: #e4e4e4;
   text-decoration: none;
}

.sectionTeaserListing {
	background: #717073;
	border: 3px solid #4b4a4d;
	height: 80px;
	width: 625px;
	margin: 10px;
}

.sectionTeaserListing h2 a {
	color: #e4e4e4;
}

div.teaserImageOverlay {
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 10;
}
</style>

Are you trying to get the text to display on top of the image?

I did this and it worked

.node
{
    position:relative;
}
.node h2
{
    position:absolute;
    left: 0px;
    top: 0px;
    z-Index: 1000;
}

so, it appears that I simply needed a break.

I gave the h2 a negative margin top to bring it back into the frame of the div and moved my link to the div that i am adjusting the opacity of.

the text should be displayed behind the image, then you mouse over and the image fades revealing the text. The whole div (i made it the image) links to a separate page.

I updated the link up top to reflect the changes minus an IE6 bug that didn't allow the div to link.

Originally posted by: Hideaway
Are you trying to get the text to display on top of the image?

I did this and it worked

.node
{
    position:relative;
}
.node h2
{
    position:absolute;
    left: 0px;
    top: 0px;
    z-Index: 1000;
}

So... you're sayin' you fixored it?

[edit]Nevermind [/edit]