Reputation: 8168

solid text on transparent div on image

I am trying to reproduce this image, with HTML and CSS, but I'm not sure how to place solid images on translucent divs on top of an image. There's one up top and on bottom. And I need a table of these.

http://dl.dropbox.com/u/17949100/house.png

Response to comment: <table> is my lazy way of forcing all the divs to be the same width (and the image). I guess I need to take the text out of the divs and place them, which I also had a hard time doing. Then I worried if use resizes the browser.

Here's what I got so far on jsFiddle. Here's the HTML code:

<table><tr><td>
     <img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
     <div class="address"><p class="address">804 Rolfe</p></div>
     <div class='desc'>
         <span class='l'>2 Bedrooms</span>
         <span class='r'>$2100</span>
     </div>   
</td></tr></table>

Here's the CSS file:

div.address { 
    width:100%; 
    height:20px;
    background-color:#000000; 
    opacity:0.5;
}

span.l{
    width:50%;
    font-family:Helvetica;
    color:#FFFFFF;
    text-align:center;
    font-size:75%;
    float:left;
    margin-top:0px;
}
span.r{
    width:50%;
    font-family:Helvetica;
    color:#FFFFFF;
    text-align:center;
    font-size:75%;
    float:right;
    margin-top:0px;
}

div.desc { 
    width:100%; 
    height:20px;
    background-color:#000000; 
    opacity:0.5;
}

p.address{
    font-family:Helvetica;
    height:20px;
    opacity:1;
    color:#FFFFFF;
    text-align:center;
}

Upvotes: 0

Answers (4)

katychuang

Reputation: 1028

Here's my attempt, it includes the shadow border around the image: http://jsfiddle.net/katychuang/2R3hk/

Removed tables to use div. The outer class is "item"

<div class="item">
  <div class="address">
      <span>804 Rolfe</span>
  </div>
    <img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
   <div class='desc'><span class='l'>2 Bedrooms</span><span class='r'>$2100</span></div>
</div>

And the CSS. It is good to specify the individual widths for .item and .item img, to get them to line up rather than using 100%

.address {  
    height:20px;
    width:inherit;
    background: rgba(0, 0, 0, 0.70);
    font-family:Helvetica;
    color:#FFFFFF;
    text-align:center;
    z-index:500;
    position:absolute;
    top:0px;
    left:0px;
    padding-top:5px;
}

span.l{
    width:50%;
    font-family:Helvetica;
    color:#FFFFFF;
    text-align:center;
    font-size:75%;
    float:left; 
}
span.r{
    width:50%;
    font-family:Helvetica;
    color:#FFFFFF;
    text-align:center;
    font-size:75%;
    float:right; 
}

.desc { 
    width: inherit;
    background: rgba(0, 0, 0, 0.70);              
    height: 20px;
    z-index: 500;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-bottom: 5px;
}

.item img {width:250px}

.item {
  position:relative;
  width: 250px;
  margin: auto;
  padding: 0px;
  -moz-box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* Saf3.0+, Chrome */
        box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* Opera 10.5, IE 9.0 */
      filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#888'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#888')"; /* IE8 */
}

body {background-color:#EEEEEE;}

Upvotes: 2

Billy Moat

Reputation: 21050

Here's my interpretation of what you should be doing:

http://jsfiddle.net/32szC/8/

HTML:

<div class="product">
    <img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
    <span class="address">804 Rolfe</span>
    <div class='desc'>
        <span class='left'>2 Bedrooms</span>
        <span class='right'>$2100</span>
    </div>
</div>

CSS:

.product {
    width: 272px;
    height: 220px;
    position: relative;
}

.product img {
    position: relative;
    z-index:1;
}

.address, .desc { 
    display: block;
    width: 252px; /* 272px */
    padding: 5px 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba( 0, 0, 0, 0.5);
    color: #fff;
}

.desc { 
    top: auto;
    bottom: 0;
    overflow: hidden;
}

.desc .left {
    float: left;
}

.desc .right {
    float: right;
}

Upvotes: 2

Fabrizio Calderan

Reputation: 123377

The fiddle with markup cleaned and css refactored: http://jsfiddle.net/32szC/4/

Anyway take into serious consideration the suggestion to not use tables for layout purpose: so I made the css working even if you choose to remove the table structure at all using display: inline-block on the .wrapper element (see http://jsfiddle.net/32szC/7/)

HTML

 <table>
 <tr><td>
     <div class="wrapper">
         <img src="http://dl.dropbox.com/u/17949100/samplehouse.png" />
         <div class="address"><span class="address">804 Rolfe</span></div>
         <div class='desc'><span>2 Bedrooms</span><span>$2100</span></div>
    </div>
 </td></tr></table>

CSS

.wrapper {
    position: relative;
    height: 100%;
}
.wrapper div {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    background: rgba(0,0,0, .75);
    height:20px;
}

div.address { top: 0; }
div.desc { bottom: 0; }

span {
    font-family: Helvetica;
    text-align:center;
    font-size:75%;
    color: #fff;
    height: 20px;
    line-height:20px;
}

.address span {
   display: block;
}

.desc span {
    width:50%;   
    float: left;
}
.desc span + span {
    float:right;
}

Upvotes: 2

linuxdan

Reputation: 4854

Looks like you just need some negative margins. I would place the address above the image and the description below it. Then something as simple as margin-bottom: -20px will overlap the address over the image.

I made the appropriate changes here jsFiddle

Upvotes: 1

solid text on transparent div on image

Answers (4)

Related Questions