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;
}
divimg {
  vertical-align: top;
}
divh2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.5);
  text-align: center;
  margin: 0;
  padding: 1.0em0; /*optional*/display: none;
}
div:hoverh2 {
  display: block;
}

Here is one way of displayacaption over an image using CSS only.

<div><imgsrc="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><imgsrc="http://lorempixel.com/100/100/nature" /></p>