Bootstrap Overlay Text on Image

Question

I am trying to display overlay text on the Image using Bootstrap. I refereed the Stack Overflow Question and Answer. But Overlay is not fit into Image. I don't know What I have missed in that Answer

What I have tried Fiddle Here

Thank You

HTML

<div class="container">
   <div id="DivOurProducts" class="row">
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/1">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/2">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/3">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/4">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
    </div>
    </div>

CSS

.fixOverlayDiv{
    width:100%; 
    padding:0px;
}
.OverlayText{
     background-color: #000;
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 100%;
}

you can also use a carousel-caption. Check my answer here https://stackoverflow.com/a/62446655/5876626 — pcodex, Jun 18 '20 at 09:25

Maria Jeysingh Anbu · Accepted Answer · 2015-08-11T16:47:28.733

7

I found an Answer. I have missed Position = "relative" for Parent Div

CSS

In fixOverlayDiv class added Position = "relative"

.fixOverlayDiv{
 position: relative;
 width:100%; 
 padding:0px;
}

Updated Fiddle Here

edited Aug 11 '15 at 16:47

answered Aug 11 '15 at 16:32

Maria Jeysingh Anbu

3,164
3
34
55

score 0 · Answer 2 · answered Aug 11 '15 at 15:24

0

Do you want to change the css class to .OverlayText{ background-color: #000; bottom: 20%;
color: #fff; left: 25%; opacity: 0.5; position: absolute; width: 50%; }

answered Aug 11 '15 at 15:24

Mahi

1
2

Its not clear what you want to achieve. You can use developer tools and check html and css classes. for eg. in chrome you can do F12 and see details. Also you can right click text element on your page and select inspect element. You can modify the css and see changes. if you are trying to overlap text entirely on image try this( tested on Chrome browser) .OverlayText{ background-color: #000; bottom: 0; height:100%; color: #fff; left: 0; opacity: 0.5; position: absolute; width: 82%; margin-left:15px; } fiddle here https://jsfiddle.net/DTcHh/10947/ – Mahi Aug 11 '15 at 16:01
I am trying to do something like [this](https://phanivankadari.files.wordpress.com/2013/11/image_thumb.png) – Maria Jeysingh Anbu Aug 11 '15 at 16:11

Bootstrap Overlay Text on Image

2 Answers2