.item {
    left: 0;
    float: left;
    display: block;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30%;
    top: 0;
    z-index: 1;
    position: absolute;
    padding: 0 4%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -webkit-transition: 2s;
}

.item:hover {
    transform: translateY(-50%);
    -ms-transform: translateY(-50%); 
    -webkit-transform: translateX(-50%); 
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -webkit-transition: 2s;
}

.item::after {
    clear: both;
    content: "";
    display: table;
}

img {
    height: 150px;
    width: 150px;
}

img:hover {
    transform: scale(1.2);
    -ms-transform: scale(1.2); 
    -webkit-transform: scale(1.2);
}

.wrapper {
    position: relative;
}