CODEWITHSUNDEEP
htmlcss
Tessa Painter
Tessa Painter

Reputation: 2014

Overlay text on image HTML

I have an image on which I want to overlay some white text. I'm trying to achieve the same thing video-sharing sites such as YouTube do with the video duration in the corner of the thumbnail. How can I do this with CSS/HTML?

Like This:

Upvotes: 2

Views: 6335

Answers (5)

Deepak Dholiyan
Deepak Dholiyan

Reputation: 1912

This is very easy to do. I am sure you do not have enough knowledge of CSS. But any way I will tell you on this.

Your structure should be like below:

    <div class="relative">
    <img src="" />
    <span class="absolute">text</span>
    </div>

Then add css for this

    .relative{float:left; position;relative;}
    .absolute{position:absolute; bottom:0px; right:0px;}

Adjust position as needed.

Upvotes: 1

Ehsan
Ehsan

Reputation: 12969

Try This :

.container {
    width: 300px;
    position: relative;
}

.container img {
    width: 100%;
}

.container h3 {
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 2px;
}
<div class="container">
    <img src="https://i.imgur.com/0s8kLb7.png">
    <h3>Cute Animal</h3>
</div>

Upvotes: 5

LKG
LKG

Reputation: 4192

.main {
  width:400px;
  position:relative;
}
.picture {
  width:100%;
}
.main p {
  position:absolute;
  bottom:0px;
  right:0px;
  color:#fff;
  font-size:14px;
  background:#999;
  padding:3px;
  z-index:99;
}
<div class="main">
<p>
Hello
</p>
<img class="picture" src="http://lorempixel.com/400/200/sports/" alt="">
</div>

Upvotes: 2

Emad Dehnavi
Emad Dehnavi

Reputation: 3451

Here you go :

HTML : 

<div class="image">
  <img src="http://lorempixel.com/400/400/sports/2" alt="" />      
  <h2><span>Some Text</span></h2></div><br/>
</div>

CSS :

.image { 
  position: relative; 
  width: 100%; /* for IE 6 */
}

h2 { 
  position: absolute; 
  top: 300px; 
  left: 0; 
  width: 100%; 
}

h2 span { 
  color: white; 
  font: bold 24px/45px Helvetica, Sans-Serif; 
  letter-spacing: -1px;  
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.4);
  padding: 10px; 
}

https://jsfiddle.net/emilvr/f03m3Lks/

You can play with top & left to set your desire location

Upvotes: 1

Keval
Keval

Reputation: 141

You can use CSS for it.

There are two ways of doing it ~

position: absolute;
top: 200px;
left 200px;

So this one sets the position of an element to absolute and then you can specify the location in pixels but it would make it something which can't change it's position in response to other elements. It would make your element like a rectangle in Paint which you can move at freely at any place.

The Second one is recommended by me ~

margin-top: -200px;

This one is a dirty way of doing it but it is useful. You can pull thing upwards using this. If your text is on side of the text you can use margin-left as same. It depends on you which method you want to use and how much pixels do you want to specify.

In your case I could give mathematical expression for doing this ~

margin-top: -text_height; margin-left: video_width - text_width;

Enjoy :D

Upvotes: 1

Related Questions