filippoferri
6/30/2018 - 6:50 AM

over animated

.background {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -moz-transition: transform 550ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
    -o-transition: transform 550ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
    transition: transform 550ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
    -webkit-transform-origin: left 0;
    -moz-transform-origin: left 0;
    -o-transform-origin: left 0;
    transform-origin: left 0;
    -webkit-transform: scale(0,1);
    -moz-transform: scale(0,1);
    -o-transform: scale(0,1);
    transform: scale(0,1);
}

.thumbsimg:hover .background {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

.thumbsimg:hover .background {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}
<a href="#" target="_blank" rel="nofollow">
        <div class="thumbsimg  largesize" id="animscroll">
                <div class="info black">
                    <div class="inlcreateur"></div>
                    <div class="ctn-title">
                        <h3 class="black">Nike air max 270</h3>
                        <div class="price black">shop it — 159 €</div>
                    </div>
                    <div class="background" style="background-color:#ff8491"></div>
                </div>
                <img width="660" height="397" src="image.jpg" class="attachment-large size-large" alt="nike-air-max-270-2-2" sizes="(max-width: 660px) 100vw, 660px">
        </div>
    </a>