Menu
I ran accross this example in the image below that is done in Flash and I was wondering if a similar affect of having a transparent box at the bottom of an image with text on it is possible with CSS or something other then flash?
(source: ajaxline.com)
438
Use z-index and top . This will layer the div on bottom, the image and then the span (overlay) on top. To set the positioning from the top edge, use top , which can be used with negative numbers if you need it to be higher on the Y axis than it's parent.
By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.
First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border - the div is transparent.
Sure, here is a cross-browser way of doing so:
<html> <head> <style type="text/css"> div.imageSub { position: relative; } div.imageSub img { z-index: 1; } div.imageSub div { position: absolute; left: 15%; right: 15%; bottom: 0; padding: 4px; height: 16px; line-height: 16px; text-align: center; overflow: hidden; } div.imageSub div.blackbg { z-index: 2; background-color: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; } div.imageSub div.label { z-index: 3; color: white; } </style> </head> <body> <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --> <img src="image.jpg" alt="Something" /> <div class="blackbg"></div> <div class="label">Label Goes Here</div> </div> </body> </html> This method doesn't require JavaScript, doesn't cause to lose ClearType text in IE, and is compatible with Firefox, Safari, Opera, IE6,7,8... Unfortunately, it only works for one line of text. If you want multiple lines, either adjust div.imageSub div's height and line-height property, or use the following (modifications to the CSS and requires the label to be specified twice).
<html> <head> <style type="text/css"> div.imageSub { position: relative; } div.imageSub img { z-index: 1; } div.imageSub div { position: absolute; left: 15%; right: 15%; bottom: 0; padding: 4px; } div.imageSub div.blackbg { z-index: 2; color: #000; background-color: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; } div.imageSub div.label { z-index: 3; color: white; } </style> </head> <body> <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --> <img src="image.jpg" alt="Something" /> <div class="blackbg">Label Goes Here</div> <div class="label">Label Goes Here</div> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
