Adding text over an image in HTML CSS

Question

I am trying to add text over top of an image on a 'product card' listing. The top left and top right div classes aren't appearing over top of the image. Here is my code:

.cardcontainer {
    position: relative;
}
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}

<section class="4u">
    <div class="cardcontainer">
        <a href="https://{{ jinja image link }}" target="_blank" class="image featured"><img src={{ jinja image source }} alt=""></a>
        <div class="top-left">top left text</div>
        <div class="top-right">top right text</div>
        <div class="textbox">
            <!--some stuff here that appears below the image-->
        </div>
    </div>
</section>

Any ideas? thanks for your help!

score 0 · Accepted Answer · answered Jun 02 '20 at 15:50

Based on your code, I'm assuming that you haven't considered that the image could differ in size. <div> tags actually consume the whole width of the image. <img>, however, doesn't follow the same rule. If you image is of 300px width, it will maintain that unless specified through the width attribute or style.

You will need to consider adjusting your image's size to match your <div> container's width.

Here's an adjusted code you can check out:

<section class="4u">
    <div class="cardcontainer">
        <a href="https://localhost" target="_blank" class="image featured"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png"} alt=""></a>
        <div class="top-left">top left text</div>
        <div class="top-right">top right text</div>
        <div class="textbox">
            Here's some text below
        </div>
    </div>
</section>

In the style below, I matched the image's width to the .cardcontainer. You can change that anytime of course. I also added style to .textbox to put it on top of the image as you specified.

.cardcontainer {
    position: relative;
    width: 500px;
}

.cardcontainer img {
  width: 100%;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}
.textbox {
  position: absolute;
  bottom: 8px;
  background-color: black;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

You can play with it as well in this link: https://jsfiddle.net/f7a5ow9q/

This makes sense, I see how it works in your example and tried implementing it in mine, but it's still not showing up. My homepage has a lot of data in it so it takes a second for the CSS to load, and in that time I can see the top-left and top-right divs in HTML so I must have some conflict with my CSS. Could it have anything to do with ```
```? The CSS I grabbed for this is ```.\-4u { margin-left: 33.333333333% }``` I have no idea what it means but it keeps all of my images and text boxes in a nice neat grid. — Casey S Zduniak, Jun 02 '20 at 16:38
Hmm.. based on the style on it, it doesn't look like it should affect it. Do you have a screenshot of what it looks like now? What do you see in the styles when you **inspect** the `.cardcontainer` element in your browser? — Algef Almocera, Jun 02 '20 at 16:50
I was able to resolve the issue. I changed my classes to div ids so my card container looks like this now ```div#cardcontainer {position: relative; display: inline-block;}``` I followed everything else that you gave me, and added a z-index parameter. Works perfect now thank you! — Casey S Zduniak, Jun 04 '20 at 18:31

score 0 · Answer 2 · answered Jun 02 '20 at 15:52

here is the code for adding text on top of the image . In this i have added text in different position so that you will get the idea how it will look at different position and you can set according to your need where you want to place :

HTML:

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

CSS:

[![.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}][1]][1]

In this i have different position so that you will get an idea where you want to place your text.

Still if you get any doubt in code just feel free to ask.

score 0 · Answer 3 · answered Jun 02 '20 at 15:57

<!DOCTYPE html>
<html>
<head>
<style>
.cardcontainer {
    position: relative;
}
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
</style>
</head>
<body>

<section class="4u">
    <div class="cardcontainer">
        <a href="" target="_blank" class="image featured"><img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="" style="width:100%;"></a>
        <div class="top-left">top left text</div>
        <div class="top-right">top right text</div>
        <div class="textbox">
            Dummy Text 
            Dummy Text
        </div>
    </div>
</section>

</body>
</html>

Adding text over an image in HTML CSS

3 Answers3