CSS3 - 转换问题 - Div 定位

Question

我正在尝试创建一个动画容器...

当不透明层出现在图像上时，悬停背景图像变换比例（放大）。
字幕从右转入 "Learn More" 字幕。

我的问题是，当我尝试绝对定位我的 .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 by Darius E. Shojaei (@stinkytofu3311) on CodePen。

Answer 1

"position" 拼错 class .caption

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

jsFiddle

CSS3 - 转换问题 - Div 定位

CSS3 - Transform Issues - Div positioning

html

css

css-transforms