Caption and images overlapping

Question

Being very naive in HTML and CSS, I cannot do this, except by creating an image. So, how can I create an text overlapping an image, with a background color?

In details:

I have a square image, and I'd like to add an overlapping text. This text should have a background color spanning the whole image and should be centered both vertically and horizontally, as in the picture.

How can I do this in HTML+CSS? I'd like to avoid creating images.

Thanks!

While you might not have made an attempt at the CSS, you should *certainly* have put together some basic HTML to begin to implement this. So, what HTML do you have? What attempts *have* you made? SO is *not* a free code-writing service, it's a for helping people deal with programming problems they've encountered. Try to search properly for a solution, try to implement something and when, or if, that doesn't work? *Then* come back and ask for help, showing the relevant [MCVE] code, having read the "[ask]" guidelines. — David Thomas, Dec 14 '15 at 17:46

score 1 · Answer 1 · answered Dec 14 '15 at 17:44

I used the sample image of a penguin.

The HTML Code-

<div class="imageShadow textCenter">
 <h2>Hello</h2>
</div>

The CSS Code-

.imageShadow {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.8)
    ),
 url('http://amolife.com/image/images/stories/Animals/penguins%20(8).jpg');
  background-size: cover;
  width: 300px;
  height: 200px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}
.textCenter h2 {
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}

And Here is a fiddle in case you want to see it in action- http://jsfiddle.net/SarhadSalam/wut8gtwq/

Is it possible to remove the image from the CSS and move it to a `img` tag? — senseiwa, Dec 15 '15 at 15:55

score 0 · Answer 2 · answered Dec 14 '15 at 17:36

First, create a surrounding container that only contains your image. Then, create another a DIV inside that container that has

position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
text-align: center;

Add also the desired background-color, font-size and color, and try different opacity values.

vinoth · Answer 3 · 2020-03-06T11:41:26.357

0

Try this

position: absolute;
padding :30px;     /*(approx make change according to the page alignment for 
                     image)*/
text-align: center;
background-color:#CCC;
z-index:1;   /*( if no z-index is given for the previous image, else give more 
              value than that)*/

edited Mar 06 '20 at 11:41

answered Dec 14 '15 at 17:41

vinoth

101
11

score 0 · Answer 4 · answered Dec 14 '15 at 17:49

I am guessing you want to create image with overlay on hover. You can do it this way.

h3, p {
  margin: 0;
}

.box {
  text-align: center;
  position: relative;
  float: left;
}

.box-hover {
  background: white;;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s all ease-in;
}

.box:hover .box-hover {
  opacity: 0.9;
}

<div class="box">
  <img src="http://placehold.it/350x150/000000/ffffff">
  <div class="box-hover">
    <div class="box-hover-content">
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, <br> consectetur adipisicing.</p>
    </div>
  </div>
</div>

No, just a static image. But captions should have a background as in the image, and be centered in its background rectangle. — senseiwa, Dec 15 '15 at 10:57

Caption and images overlapping

4 Answers4