<!-- wrapper div -->
<div class='wrapper'>
	<!-- image -->
	<img src='wolf.jpg' />
	<!-- description div -->
	<div class='description'>
		<!-- description content -->
		<p class='description_content'>The pack, the basic...</p>
		<!-- end description content -->
	</div>
	<!-- end description div -->
</div>
<!-- end wrapper div -->

div.wrapper{
	float:left; /* important */
	position:relative; /* important(so we can absolutely position the description div */
}
div.description{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	left:0px;
	width:100%;
	/* styling bellow */
	background-color:black;
	font-family: 'tahoma';
	font-size:15px;
	color:white;
	opacity:0.6; /* transparency */
	filter:alpha(opacity=60); /* IE transparency */
}
p.description_content{
	padding:10px;
	margin:0px;
}

Comments

• Arturo Jan 27th, 10

  Muchas gracias!!
• Boba Jan 27th, 10

  @Arturo – You’re welcome
• Vadim Jan 27th, 10

  didn’t try but is there in css such a rule: bottombottom:0px;
• Boba Jan 27th, 10

  @Vadim – There isn’t. The syntax highlighter has few issues, if you check the source code you will see it’s bottom:0px;
• Pau Muyeshi Jan 28th, 10

  Good one! I tried and it worked.
• designfreek Jan 30th, 10

  hey check this post

  http://www.webdeveloperjuice.com/2010/01/27/easy-way-to-slide-images-with-overlay-caption-using-css-and-jquery/

  .. i made something with help or your this post
• ipad Feb 1st, 10

  css rulez
• Goodluck Feb 6th, 10

  Hi Boba
  Thanks alot man. I just saw your tutorial today. I have been sort of busy. I am really going to enjoy learning this one.I plan to put it up on a website that I am developing for an environmental organisation. Thanks once again
• Matthew C. Kriner Feb 19th, 10

  Great post, going to send this link to my friends. Truly love it. THX.
• Rimian May 12th, 10

  Thanks!

  Just a hint: You don’t need to specify units when you set values to zero: margin: 0;
• Jason Day Jun 15th, 10

  Great tutorial, I set the position to top nad the height at 100% to get a full fade effect.

  see: http://jasondaydesign.com/masonry_demo/

  thanks!
• Kurpas Ban Aug 11th, 10

  How to center div with float ?
  text-center margin-left:auto, margin-right:auto wan’t do the trick because of float.

  TIA for an hint
• admin Aug 11th, 10

  I am not sure why you are Floating anything usually width:100% with a text-align center works.
• Kurpas Ban Aug 12th, 10

  @admin Thanks for reply.
  I would be very thankful if someone explain me how to center this image within a div.

  Here is my example: http://sn.im/10l2ul
• anuj Aug 29th, 10

  thanks buddy
• Brett Sep 29th, 10

  Not a complete solution if you can only float left and right. Waste of time.
• Slim Fit Shirts For Men Jul 19th, 11

  Thank you for this post. I’ve been looking for this for a long time, and really appreciate the way you’ve laid it out for me!
• Diana Aug 22nd, 11

  wow, cool! I had tried it with spans before and it always ended up out of whack or the image had some extra padding. Your solution works great, no padding, it’s crossbrowser and very easy to customize to any site. Thanks!

  Diana
• Diana Aug 22nd, 11

  by the way, I just tested it with a transparent PNG instead of text (removing the background-color line) and it works as well.
• Satya Prakash Aug 30th, 11

  It works! Thanks
• Adam Haworth Sep 9th, 11

  Thanks for the tips work really well for me.
• Joe Johnson Sep 12th, 11

  Worked like a charm, thanks!
• Steve Sep 13th, 11

  Works great – thanks for the very helpful post!
• sanisto Mar 28th, 13

  This is exactly what I needed. Thanks a lot
• Levan Apr 15th, 13

  thanks you saved bunch of time for me

Leave your own!

Your Name

Email

Website

Comment