How to put text on an image using CSS?

Navigation
0

I need my images to have a text above with the description of each of them! I tried to touch the positions of the CSS and I'm doing well with 3 of the 4, in the fourth picture I'm getting all broken up, I do not 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;
}

What I want to do is that in each of the images (on them) appear a simple text that says CHOCOLATE, FRUIT, SWEET MILK and CREAMS to make it more beautiful for the user.

Total thanks:)

    
asked by Nacho Zve De La Torre 19.10.2018 в 20:19
source

2 answers

3

I'll give you 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>

Learn more.

    
answered by 19.10.2018 / 20:40
source
1

Regards You must create or have your image inside a container in this case a div, 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:

I hope you will be a guide ... !!

    
answered by 19.10.2018 в 20:51
Doubt about HTML, changing wordpress template Remove a row from my ASP.NET gridview