CSS - :Hover doesn’t work without absolute positioning

The css is suppose to make a caption slide out from the left side along some other CSS3 effects which it does.

However I need to remove position: absolute; from .box img. However when I do, the :hover event on .box does not seem to work no more.

JSFiddle

I commented out the position: absolute; in question.

HTML:

<div class="container">
  <div class="box">
      <img class="box-image" src="http://knyz.org/blog/content/images/2015/01/Ghost-vs-WP.png"/>
      <span class="caption scale-caption">
          <h3>Ghost vs Wordpress</h3>
          <p>What is ghost again? Ghost is a free blogging platform like WordPress. Although similar there are key differences which in my mind, make Ghost the go-to blogging platform. Just a Blogging Platform That is the most important difference. Ghost says upfront what they are about and always will be</p>
      </span>
  </div>
  <div class="box">
      <img class="box-image" src="http://knyz.org/blog/content/images/2015/01/owncloud-registration.jpg"/>
      <span class="caption scale-caption">
        <h3>OwnCloud Registration Script - Fixed!</h3>
          <p>'Bout time! I am really sorry for the long wait. I was very busy and was really not motivated to work on it after it broke for the second time. That said, you shouldn't blame me, blame ownCloud for not making it themselves! The important thing however is that now</p>
      </span>
  </div>
</div>

CSS:

.container {
  width: 500px;
}

.box {
  border: 5px solid #fff;
  cursor: pointer;
  height: 270px;
  float: left;
  margin: 5px;
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-box-shadow: 1px 1px 1px 1px #ccc;
  -moz-box-shadow: 1px 1px 1px 1px #ccc;
  box-shadow: 1px 1px 1px 1px #ccc;
}

.box img {
  /* position: absolute;*/
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  width: 100%;
}

/* Caption Common Style */
.box .caption {
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  position: absolute;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  left: 0;
}


/ **Caption 3: Fade** /
.box .fade-caption, .box .scale-caption {
  opacity: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 15px;
}
/ **Caption 6: Scale** /
.box .scale-caption h3, .box .scale-caption p {
  position: relative;
  left: -200px;
  width: 90%;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}


.box .scale-caption h3 {
-webkit-transition-delay: 0ms
  -moz-transition-delay: 0ms
  -o-transition-delay: 0ms
  -ms-transition-delay: 0ms
  transition-delay: 0ms;
}


.box .scale-caption p {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  transition-delay: 300ms;
}


/ **Fade Caption :hover Behaviour** /
.box:hover .fade-caption, .box:hover .scale-caption {
  opacity: 1;
}
/ **Scale Caption :hover Behaviour** /
.box:hover .box-image {
  -moz-transform: scale(1.4);
  -o-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

.box:hover .scale-caption h3, .box:hover .scale-caption p {
  -moz-transform: translateX(200px);
  -o-transform: translateX(200px);
  -webkit-transform: translateX(200px);
  transform: translateX(200px);
}

How would I go about fixing this issue?


solution

Add top: 0 to .box .caption. (updated example)

When the img element was absolutely positioned, it was removed from the normal flow, thus the .caption was placed over top of it because it was absolutely positioned too. If you removed the absolute positioning from the img element, it becomes part of the flow again, thereby requiring the .caption element to be positioned at the top. (thus, top: 0, relative to the parent element).

.box .caption {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  position: absolute;
  left: 0;
  top: 0; /* Added */
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}