nagaking nagaking - 3 months ago 21
CSS Question

Jquery Increase div size on hover?

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?

Answer

Use CSS3 transform: scale(1.1)

.resultitem{
  width:150px;
  height:150px;
  background:#48e;
  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>