CODEWITHSUNDEEP
csshtmlwebtwitter-bootstrap-3
Aiguo
Aiguo

Reputation: 3566

Adding a text at the bottom of an image with a dark border

I am trying to add a dark colored border at the end of an image and write a text on it. I have attached the screen shot of how I want it to be. Does anybody knows how to work this out? enter image description here

Upvotes: 0

Views: 544

Answers (3)

Prime
Prime

Reputation: 3625

http://jsbin.com/tanesehivu/5/

CODE

.box{
  width:200px;
  height:150px;
  background:grey;
  float:left;
  margin:10px;
  display:block;
  border:1px solid #999;
}

.box img{
  width:200px;
  height:150px;
 border:1px solid #999;
}


.box span {
  width:200px;
  height:30px;
  background:grey;
  display:block;
  text-align:center;
  font-size:40px;
  position:absolute;
  top:140px;
  line-height:35px;
  color:#fff;
  font-size:30px;
 }
<div class="box">
<img src ="http://www.debrecensun.hu/media/2014/01/13-parties-for-wednesday-15-january/party.jpg"/>
<span>TITLE</span>
</div>


<div class="box">
<img src ="http://www.tnpsc.com/downloads2011/StreetRaceCars.jpg"/>
<span>TITLE</span>
</div>

Upvotes: 0

Rob Scott
Rob Scott

Reputation: 8049

I'm guessing something like this?

You should read up on position CSS for elements. Position absolute and relative

Fiddle for you

<div class="container">
    <img src="http://placehold.it/200x150" alt="" /> 
    <span>Here's your text</span>
</div>

* {
    box-sizing: border-box;
}
.container {
    position: relative;
}
.container span {
    position: absolute;
    bottom: 0px;
    background-color: red;
    width: 200px;
    display: block;
    padding: 10px 15px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

Upvotes: 1

Sookie Singh
Sookie Singh

Reputation: 1623

Check this. I updated this fiddle for you! http://jsfiddle.net/EgLKV/5712/

   #container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    text-align:center;
    top:350px;
    width: 400px;
    background: #0686c9;

}

Upvotes: 0

Related Questions