35

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?

http://www.ajaxline.com/files/imgloop.png
(source: ajaxline.com)

4 Answers 4

48

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>
2
  • when running YSlow firefox plugin I notice 1 of the things it mentions being bad use is CSS Expressions, this is not considered one of those correct?
    – JasonDavis
    Jul 26, 2009 at 13:16
  • 4
    @jasondavis: filter and -ms-filter is one of them but you don't have the choice for IE. And remember, YSlow is not the law. Jul 26, 2009 at 16:18
8

Definitely.

<div style="background-image: url(image.png);" >

  <div style="position:relative; top:20px; left:20px;">
    Some text here
  </div>
</div>
5
<html>
    <body>
        <div style="position: absolute; border: solid 1px red">
            <img src="http://www.ajaxline.com/files/imgloop.png"/>
            <div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; background-color: gray; opacity: .80; -moz-opacity: 0.80; filter:alpha(opacity=80);"/>
            <div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; color: white;">
                Hello
            </div>
         </div>
    </body>
</html>
0

You can simply create an overlay by CSS only over any image.

.container{
  width:250px; height:250px;
}
.container img{width:100%;height:100%}
.container::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  background:#fff;
  z-index:9999;
  width:100%;
  height:100%;
  opacity:0;
}
<div class="container">
<img src="https://cdn4.buysellads.net/uu/1/8026/1535654409-Slack-pink_logo.png" alt="" border="0">
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.