在图片css内容下添加文字

Question

I added an image inside the Content. I want to add a text under this picture. How can I do it?

 .labelopt:hover:before { display:block; }.tooltip12:before { content: 'Only 75€'; background-image: url(https://i.ytimg.com/vi/Ue1eHtvWRTU/maxresdefault.jpg); background-size: contain;important: height; 150px:important; width: 150px;important: position;absolute: top;50%: transform;translateY(-50%): left;100%: display;none: z-index; 3: border; 2px solid #00cbb1: color; red: text-align; center: padding;5px. font-size:25px; }:labelopt { position; relative; max-width: 176px !important; }

 <br><br><br><br> <div class="clearfix product-variants-item col-xs-6"> <span class="control-label labelopt tooltip12">Add Extra €75</span> <select class="form-control form-control-select" id="group_12" > <option value="48" title="No" selected="selected">No</option> <option value="49" title="Yes">Yes</option> </select> </div>

I tried to do it in the example above, but it comes to the top of the picture. I could not assign a background color either. How can I move it under the picture and set the background color?

Answer 1

So here you go, as you have asked to align the text Only 75€ to bottom. And also to change it's background.

CSS

.tooltipspan {

  background-image: url(https://i.ytimg.com/vi/Ue1eHtvWRTU/maxresdefault.jpg);
  background-size: contain !important;
  height: 150px !important;
  width: 150px !important;
  position:absolute;
  top:-70px;
  left:100%;
  transform:translateX(30%);
  display:none;
  z-index: 3;
  line-height:250px;
  border: 2px solid #00cbb1;
  color: red;
  text-align: center;
  padding:5px;
  font-size:25px;
}
.labelopt:hover  .tooltipspan  {
  display:block;
}
.tooltipspan:after {
content:'Only 75€';
background: black;
height:30px;
color:white;
z-index:99999;
}
.labelopt {

    position: relative;
    max-width: 176px !important;
}
.clearfix{
position:relative;
}

HTML

<br><br><br><br>
<div class="clearfix product-variants-item col-xs-6">
      <span class="control-label labelopt tooltip12">Add Extra €75      <span class="tooltipspan" ></span></span>

              <select class="form-control form-control-select" id="group_12" >
                      <option value="48" title="No" selected="selected">No</option>
                      <option value="49" title="Yes">Yes</option>
                  </select>
          </div>