CSS 3 - Scaling CSS Transitions
- by Viv Shc
I am trying to scale an image when you mouseenter, which is working. I would like the image to gradually scale up with an ease transition. I used ease-in-out, which it's not working. Any suggestions?
Also, I used addClass & removeClass twice in the jquery code. Is there a way to only use it once?
Thanks!
<style>
.image {
opacity: 0.5;
}
.image.opaque {
opacity: 1;
}
.size{
transform:scale(1.2);
-ms-transform:scale(1.2); /* IE 9 */
-webkit-transform:scale(1.2); /* Safari and Chrome */
-webkit-transition: scale 2s ease-in-out;
-moz-transition: scale 2s ease-in-out;
-o-transition: scale 2s ease-in-out;
-ms-transition: scale 2s ease-in-out;
transition: scale 2s ease-in-out;
transition: opacity 2s;
}
</style>
<script>
$(document).ready(function() {
$(".image").mouseenter(function() {
$(this).addClass("opaque");
$(this).addClass("size");
});
$(".image").mouseleave(function() {
$(this).removeClass("opaque");
$(this).removeClass("size");
});
});
<div id="gallery">
<h3>Gallery of images</h3>
<img class="image" src="images/gnu.jpg" height="200px" width="250px">
<img class="image" src="images/tiger.jpg" height="200px" width="250px">
<img class="image" src="images/black_rhino.jpg" height="200px" width="250px">
<img class="image" src="images/cape_buffalo.jpg" height="200px" width="250px">
</div>
