How to get contents overlay on the Bootstrap images

Image 1 In image 1 I am trying to achieve putting contents on the image as displayed, however I cannot find the specific code, also on hover the div is being zoomed up.

Image 2 In image 2 I am wanting the contents on the right and left of the image but it should not affect the responsiveness also.

I am seeking an example where these two things are available. I have searched the web but I am getting is on hover!

Here is the example code:

HTML:

<div class="example example1">
  <p>This uses the image as background</p>
</div>

<div class="example example2">
  <img src="http://cdn2.johnnyseeds.com/images/product/large/1814.jpg" alt="">
  <div class="text">
    This uses the image as background
  </div>
</div>

CSS:

.example {
  height: 250px;
  width: 250px;
  position: relative;
}
.example1 {
  background-image: url(http://cdn2.johnnyseeds.com/images/product/large/1814.jpg);
  background-size: cover;
}

.example2 img {
  width: 100%;
}
.text {
  position: absolute;
  width: 100px;
  top: 50%;
  right: 0px;
  background-color: #ccc;
  z-index: 5;
} 

And here is a jsfiddle

Example 1 uses the background image version. Example 2 uses the absolute divs within the relative positioned frame.