CSS3 - Transform Issues - Div positioning

Question

I'm trying to create a container that animates...

On Hover background image transform scale (zooms in) while opacity layer appears over image.
Caption translates in from right with "Learn More" caption.

My issue is that when i try to absolute position my .caption it does not appear in front of all the elements within the container. It seems the position:absolute is being overwritten by something. When i try to debug i can see that it's behind the container elements. The desired affect would be the .caption position in front of the container elements.

Does anybody know what i'm doing wrong here?

      <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;
}

See the Pen OCCP - Services Container Animation on Hover by Darius E. Shojaei (@stinkytofu3311) on CodePen.

in your code there is a small spell mistake you have written as positon instead of position on class .caption just correct it will solve issue. — Iqbal Pasha
– Iqbal Pasha, Commented Mar 7, 2016 at 7:31

Shayan · Accepted Answer · 2016-03-07 07:14:24Z

2

wrong spell of "position" on class .caption

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

jsFiddle

answered Mar 7, 2016 at 7:14

Shayan

9669 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StinkyTofu Over a year ago

oh... doh! That's what i get for coding all day. Thanks m8. I thought i had lost my mind..

Collectives™ on Stack Overflow

CSS3 - Transform Issues - Div positioning

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related