Caption Does Not Work After Centering Image

When I hovered on the image, some text would appear over that image. However, after centerizing it, something went wrong with positioning and the text caption is displayed a bit le

Solution 1:

div {
  display: inline-block;
  position: relative;
}
div img {
  vertical-align: top;
}
div h2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.5);
  text-align: center;
  margin: 0;
  padding: 1.0em 0; /*optional*/
  display: none;
}
div:hover h2 {
  display: block;
}

Here is one way of display a caption over an image using CSS only.

<div>
  <img src="http://lorempixel.com/400/200/nature" />
  <h2>Some Caption Text</h2>
</div>

Solution 2:

Try using css :hover , :after

p:hover:after {
  content:"Rainbow and Tree";
  font-family:Arial;
  font-size:11px;
  background:#000;
  text-align:center;
  position:relative;
  color:#fff;
  top:-4px;
  left:-99px;
  z-Index:1;
  opacity:.75;
}

<p>
  <img src="http://lorempixel.com/100/100/nature" />
</p>