Home / Questions / 206177
Accepted
Nacho Zve De La Torre
Asked: 2020-10-20 10:19:40 +0800 CST 2020-10-20 10:19:40 +0800 CST

How to put text on an image using CSS?

  • 772

I need my images to have a text above with the description of each of them! I tried to touch the CSS positions and it works fine with 3 of the 4, in the fourth image everything falls apart, I don't know why :(

HTML:

<div class="helados container">
    <div class="row">
        <div class="col s12 l4">
            <img th:src="@{/images/chocolate.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/crema.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/dulceDeLeche.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/frutales.png}" />
            <a href="#"></a>
        </div>
    </div>
</div>

CSS:

.helados {
        padding: 0 1.5rem;
    }
.helados img {
        width: 100%;
    }
  .container {
    width: 100%;
}

.helados.container {
    padding: 0;
}

.helados.container .col {
    padding: 0 0.75rem !important;
}

enter image description here

What I want to do is that in each of the images (above them) a simple text appears that says CHOCOLATE, FRUIT TREES, DULCE DE LECHE and CREAMS so that it looks more beautiful for the user.

Thank you total :)

css

2 Answers

  1. Best Answer

    Here's an example that worked for me.

    div, img {
  display: block;
  position: relative;		
  width: 300px;
}

div p {
  background-color: rgba(255,255,255,.8);
  display: block;
  position: absolute;
  bottom: -16px;
  left: 0;
  padding: 5px;
  width: 100%;
}
    <div>
  <img src="https://i.imgur.com/fXCarlD.jpg">
  <p>Texto</p>
</div>

    More information.

    • 4

  2. Greetings You must create or have your image inside a container, in this case a div, additionally the description can go inside a span, personal tag, div...etc... in this case I use a span:

    <div class='img'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Ice_Cream_dessert_02.jpg/220px-Ice_Cream_dessert_02.jpg'/>
<span>Copa de Chocolate</span>
</div>

    To apply the styles I use this css code:

    <style>
div.img{
  display:table;
}
div.img img{
 margin:0;
 padding:0;
}
div.img span{
 line-height:normal;
 font-size:11px;
 display:table-caption;
 margin:0;
 padding:0;
 background:#646464;
 color:white;
 font-style:italic;
 text-align:center;
 position:relative;
 height:0;
}
div.img span span{
 background:rgba(0, 0, 0, 0.4);
 display:block;
 padding:3px;
 text-shadow:0 0 15px white;
}
div.centro{
  margin:0 auto;
}
div.izq{
  float:left;
}
div.der{
  float:right;
}
</style>

    Result:

    Result

    I hope it helps you...

    • 1