JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div class="package-images">
    <img src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" />
</div>

CSS

.package-images img{
  height:200px;
  transition: height 2s ease-in-out;
  -moz-transition: height 2s ease-in-out; /* Firefox 4 */
  -webkit-transition: height 2s ease-in-out; /* Safari and Chrome */
  -o-transition: height 2s ease-in-out;
}
.package-images img:hover{
  height:350px;
}

div.image-effect{border:1px solid red;}
div:not(.image-effect){border:1px solid blue;}

JavaScript

var jq = $.noConflict();
jq(document).ready(function(){
    jq(".package-images").mouseover(function(){
        jq(this).addClass("image-effect");
    }).mouseout(function(){
        jq(this).removeClass("image-effect");
    });
});