Jquery css image overflow hidden left transition

Question

I'm trying to combine my css and Jquery script in order to show an image which is at the beginning hidden and show it by doing a left transition.

I know that I can do it with pure Jquery by using animate left, but for my need, I must use css and add the class.

My html:

<div id="wapperimg">
<img class="slide" src="http://lorempixel.com/400/200/sports/1/" />
</div>
<button id="ok">ok</button>

my css :

#wrapperimg {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

.slide {
    position: absolute;
    overflow:hidden;
    left: -100px;
    width: 100px;
    height: 100px;
    transition: 1s;
}
.shown .slide {
transition: 1s;
    left: 0;
}

my Jquery:

$(document).ready(function() {
  $('#ok').click(function() {
$("#wappering .slide").addClass('shown');
   });
}); 

Do you know what I'm doing wrong ? Regards, Jarod

Answer 1

You have a typo in

$("#wappering .slide")

Should be

$("#wapperimg .slide")

And also you should remove .slide from .shown .slide:

.shown {
transition: 1s;
    left: 0;
}

See here: http://jsfiddle.net/43WxB/

Answer 2

looks like your adding a class of shown to the image which has the class of slide...

Surely your CSS should look like this

.slide.shown  {
transition: all ease 1s;
    left: 0;
}