css transition ease,css - css3 transition ease out - Stack Overflow

i create a mask for image. when i hover over mouse on image then the mask will show but when the mouse is out then it will suddenly disappear rather then slowly.i want something like This Effect. This is my Jsfiddle

my code is...

.top

{

margin-top: 200px;

}

.top div

{

padding:0px;

margin: 0px;

}

img

{

width: 100%;

height: 400px;

padding: 0px;

margin: 0px;

-webkit-transition: margin 1s ease;

-moz-transition: margin 1s ease;

-o-transition: margin 1s ease;

-ms-transition: margin 1s ease;

transition: margin 1s ease;

}

.blog-post:hover img

{

margin-left: 100px;

}

.blog-post

{

border: 1px solid #c0c0c0;

float: left;

overflow: hidden;

}

.mask

{

top: 0;

left:0;

padding: 0;

position: absolute;

display: inline-block;

overflow: hidden;

visibility: hidden;

width: 250px;

height: 100%;

border: 1px solid #ff1493;

-webkit-transition: all 0.5 ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.5s ease-in-out;

transform-origin: 0 0;

-webkit-transform: rotateY(-90deg);

-moz-transform: rotateY(-90deg);

transform: rotateY(-90deg);

-webkit-transition: -webkit-transform 0.4s, opacity 0.2s 0.4s;

-moz-transition: -moz-transform 0.4s, opacity 0.2s 0.4s;

transition: transform 0.4s, opacity 0.2s 0.4s;

background: #ff1493;

}

.mask h4

{

text-align: center;

}

.blog-post:hover .mask

{

visibility: visible;

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

transform: rotateY(0deg);

-webkit-transition: -webkit-transform 1s, opacity 0.2s;

-moz-transition: -moz-transform 1s, opacity 1.2s;

transition: transform 1s, opacity 0.2s;

}

Post title

i want the when the mouse is out from image then it will slowly disappear rather then fast.