animacion de divs con JS

Se utiliza transform y transition de CSS

by Porfirio Chavez

HTML

<div id="producto-1" class="imagenloca" onmouseover="easiarIn(this);" onmouseout="easiarOut(this);"
></div>
<div id="producto-2" class="imagenloca" onmouseover="easiarIn(this);" onmouseout="easiarOut(this);"></div>

<div id="producto-3" class="imagenloca" onmouseover="easiarIn(this);" onmouseout="easiarOut(this);"></div>

CSS

.imagenloca{
    width: 100px;
    height: 100px;
    background-color: #FCA;
    margin: 10px;
    float: left;
}

JavaScript

function easiarIn(element){
    element.style.transform = 'scale(1.5)';
    element.style.transition = '0.2s ease-in';
}

function easiarOut(element){
    element.style.transform = 'scale(1)';
    element.style.transition = '0.2s ease-out';
}