CSS

CSS Overlaying

I’ve been asked more than once now, “How do I overlay images with text using CSS?”. The answer is so much simpler than the question, it is really easy and in this tutorial I will show you how to do it.

Now to make things better I will be creating this:

Stage6 Video Thumb

Okay let’s look at the HTML behind this, then we can overlay the CSS on top of it:

//this is the actual thumb div
<div class="thumbOuter">
        //link containing the image
        <a href="viewVideo" class="thumbList" >                	
             <img src="videoThumb" alt="videoTile">
        </a>
        //backer transparent bar
        <div class="LowerBar"></div>
              //writing on top of the bar
              <div class="LowerBarTop" style="color:white; padding-top:3px; padding-left:3px;">Length of Video</div>
              <div class="LowerBarRate" style="float:right;" id="rateInfo">
                        //post the thumbs up here                   	                        	
               </div>
</div>

Now that we have the HTML it is time to look at the CSS behind it all:

ul.thumbListLayoutBox{
	display:block;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

ul.thumbListLayoutBox li{
	float:left;
	height:156px;
	margin:10px 11px 11px;
	padding:5px 5px 5px 0px;
	position:relative;
	width:216px;
	z-index:1;
}

.thumbOuter{
	display:block;
	position:relative;
	text-align:left;
	width:218px;
}

a.thumbList{
	display:block;
	height:120px;
	overflow:hidden;
	padding:1px;
	position:relative;
	text-decoration:none;
	width:214px;
	border:2px solid #848486;
}

a.thumbList img{
	height:120px;
	width:214px;
	border:0;
}

div.LowerBar{
	background:black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;
	
}
	
div.LowerBarTop{	
	border-top:1px solid black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;
	
}
	
div.LowerBarRate{	
	height:24px;
	right:4px;
	top:96px;
	position:absolute;
	display:block;
	
}

Now what I would like to draw your attention to is:

.thumbOuter{
	display:block;
	position:relative;
	text-align:left;
	width:218px;
}

div.LowerBar{
	background:black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;
	
}

This code is the background for the lower bar shown in the picture. Notice how I use top to position the object whilst causing it to float over the video thumb by using position:relative on the bottom div and position:absolute on the top div. There, no need for z-index’s which will confuse IE. Enjoy :).

Advertisements

2 thoughts on “CSS Overlaying

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s