CODEWITHSUNDEEP
htmlcss
user7843796
user7843796

Reputation:

Responsive Image With An Overlay Text Stay on The Same Position

I would like to add an overlay text over an image, that the text cannot go outside the image but always inside the image even I zoom in or zoom out in my browser or I view that in different devices.

Also, an image with 100 percent width and height and the text always on the same position even using different device. Using only CSS and HTML the way that every framework do such Bootstrap, MaterializeCSS, Foundation, SemanticUI etc .

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

img {
  width: 100%;
}

h1 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}

h1 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.7);
  padding: 10px;
}
<div class="image">
  <img src="http://www.thepoortraveler.net/wp-content/uploads/2012/06/Banaue-Rice-Terraces.jpg" alt="Banaue Banaue-Rice-Terraces" />
  <h1><span>The Summer Capital of the Philippines<br />Baguio City</span></h1>
</div>

Upvotes: 0

Views: 2296

Answers (2)

athi
athi

Reputation: 1683

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

img {
  width: 100%;
}

h1 {
  position: absolute;
  top: 40%;
  width: 100%;
}

h1 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.7);
  padding: 10px;
}
<div class="image">
  <img src="http://www.thepoortraveler.net/wp-content/uploads/2012/06/Banaue-Rice-Terraces.jpg" alt="Banaue Banaue-Rice-Terraces" />
  <h1><span>The Summer Capital of the Philippines<br />Baguio City</span></h1>
</div>

Upvotes: 2

Carl Binalla
Carl Binalla

Reputation: 5401

This will center <h1> even when resizing the relative <div>

h1 { 
   position: absolute; 
   top: 50%; 
   left: 50%; 
   transform:translate(-50%, -50%); 
}

Upvotes: 0

Related Questions