Jquery Increase div size on hover?

css, jquery

Solution

Use CSS3 `transform: scale(1.1)`

.resultitem{
  width:150px;
  height:150px;
  background:#48e;
  -webkit-transition: 0.5s;
          transition: 0.5s;
}

.resultitem:hover{
  background:#59f;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

<div id="parent">
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
</div>

Problem

How to increase the div size on hover? Every div have the same class name, it's created dynamically. I tried this code: ``` <script type="text/javascript"> $('.resultitem').bind('mouseover', function() { $(this).addClass('hovers'); $('.resultitem').not('.hover').css({ opacity: 0.3 }); }); $('.resultitem').bind('mouseout', function() { $('.resultitem').removeClass('hovers').fadeTo('normal',1); }); </script> <style type="text/css"> .hovers { width:300px; height:400px; } img.hovers { width:300px; height:300px; } </style> ``` It changes the alignment of other div?

Original source