Question

我试图创建一个动画容器......

悬停背景图像变换比例（放大），而不透明度图层出现在图像上。
标题从右侧翻译为＆＃34;了解更多＆＃34;标题。

我的问题是，当我尝试绝对定位我的.caption时，它不会出现在容器中的所有元素前面。看来这个位置：绝对被某种东西覆盖了。当我尝试调试时，我可以看到它在容器元素后面。所需的影响将是容器元素前面的.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

@stinkytofu3311

CodePen

Answer 1

班级.caption

上的“位置”错误拼写

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

jsFiddle

CSS3 - 转换问题 - Div定位

1 个答案: