Show image over another image on hover

Question

I have the following code: JSFiddle

HTML:

Answer 1

I got it myself to show an image in the center of another image on hover

HTML:

CSS:

.imageBox {
  position: relative;
  float: left;
}

.imageBox .hoverImg {
  position: absolute;
  left: 350px;
  top: 100px;
  display: none;

}

.imageBox:hover .hoverImg {
  display: block;
}

Note that left: 350px and top: 100px will be changed based on your background-image in my case background-image was 700x200(width x height). So in order to position the image to the center just take half of width and height.