html - CSS3 - 变换问题 - Div 定位

Question

我正在尝试创建一个具有动画效果的容器...

1. 当不透明层出现在图像上时，悬停背景图像变换比例(放大)。
2. Caption 从右侧翻译为“了解更多”标题。

我的问题是，当我尝试绝对定位我的 .caption 时，它不会出现在容器内所有元素的前面。似乎 position:absolute 被某些东西覆盖了。当我尝试调试时，我可以看到它在容器元素的后面。所需的效果是容器元素前面的 .caption 位置。

有人知道我在这里做错了什么吗？

      <div class="container">
          <img id="image-zoom" src="http://s16.postimg.org/cr851jb5h/services_img_demo.jpg"/>
          <span class="opacity-layer scale-opacity-layer"></span>
          <div class="caption"><a href="#">Learn More+</a></div> 
       </div>

/* Overflow will prevent the scaled image from expanding the width of it's container */
.container {
    cursor: pointer;
    height: 254px; /* Controls Height of Container */
  width: 381px; /* Controls Width of Container */
    float: left;
    margin: 5px;
    position: relative;
    overflow: hidden;
}
/** On Hover the image will scale (zoom) to 1.4 of its size **/
.container:hover #image-zoom {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}
/** Controls transition speed of the opacity-layer appearing **/
.container 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;
}
.container .opacity-layer {
    background-color: rgba(0,0,0,0.8); /* Controls the color of the opacity-layer */
    position: absolute;
    z-index: 50;
        -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;
}
 .container .scale-opacity-layer  {
    opacity: 0; /* Controls Default Opacity */
    width: 400px; /* Controls width of opacity layer */
    height: 300px; /* Controls height of opacity layer */
}
/** Fade Opacity-layer :hover Behaviour **/
 .container:hover .scale-opacity-layer  {
    opacity: 0.3; /* Controls Opacity of the opacity-layer */
}

/**        Container Caption          **/
.caption {
  posiiton:absolute;
  height:100px;
  width:100px;
  left:100px;
  background-color:red;
  z-index:100;
}

看笔 OCCP - Services Container Animation on Hover作者:Darius E. Shojaei ( @stinkytofu3311 ) 在 CodePen .

Answer 1

类 .caption 上的“position”拼写错误

.caption {
  position: absolute;
  height:100px;
  width:100px;
  left:100px;
  background-color:red;
  z-index:100;
}

jsFiddle