Skip to content

Instantly share code, notes, and snippets.

@porfidev

porfidev/algo.html

Created May 27, 2015 15:01
Show Gist options
  • Save porfidev/86b2b0fcdf2a428d91c6 to your computer and use it in GitHub Desktop.
Save porfidev/86b2b0fcdf2a428d91c6 to your computer and use it in GitHub Desktop.
Download ZIP
JS para animacion rapida con estilos CSS
Raw
algo.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.imagenloca{
width: 100px;
height: 100px;
background-color: #FCA;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<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>
<script>
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';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment