CODEWITHSUNDEEP
jquery
Wanting to learn
Wanting to learn

Reputation: 468

jquery hover image animate image in size and pan left

I have a grid of images and I'm trying to work out how I can hover over one image have it zoom in but as the image zooms on the actual visible area is the same so when it's done zooming in a animate is triggered to animate the image left.

this currently what I'm trying. I think I need to change my css so the image stays within a confined viewable area

my JS

$('.grid img').on({
mouseenter: function(){
    $(this).animate({width: '406px', height: '253px'}, 800, function(){
        $(this).animate({right: '50px'},1000);
         });
       },
mouseleave: function(){
    $(this).animate({ right: '0px', width: '339px', height: '211px'}, 800);
   }
});

mu css

body{background:url(bg.jpg);}

ul.grid {
 list-style: none;
  top: 0;
  margin: 60px auto 0;
  width: 1200px; 
  }

.grid li span {   
  background:url(mag.png);
  height: 9px;
  width: 9px;   
  top:2px;
  right: 2px;
  position:absolute;   
 }

.grid li a:hover img {
 -webkit-transition: opacity .3s ease-in;
 -moz-transition: opactiy .3s ease-in;
 -ms-transition: opacity .3s ease-in;
 -o-transition: opacity .3s ease-in;
 transition: opacity .3s ease-in;
 opacity: 1;
 }

.grid:hover li {
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opactiy .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
  zoom: 1;
  filter: alpha(opacity=1);
  opacity: 0.3;
 }

.grid li {
 float: left;
 margin: 0px 40px 75px 0px;
 display:inline;
 position:relative;
  }

.grid li img {
  margin: 0;
  width: 339px;
  height: 211px;
  position:relative;
  overflow:hidden;
 }

.grid:hover li:hover {opacity: 1;}
.grid img::selection { background-color: transparent; }

#hidden{
 position:absolute;
 width: 1300px;
 height:670px;
 top:0px;
 z-index:-1;
 }

.title{
 font-size: 100%;
 top: -40px;
 color: white;
 left: 0%;
 position: absolute;    
 z-index: 1;
}

JSFIDDLE

Upvotes: 0

Views: 935

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

You don't need jQuery at all, it'd be easiest to just use CSS3 transitions like you have on the opacity. Updated jsFiddle

Here is the relevant updated CSS

.grid li a:hover img {
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.15);
  -ms-transform: scale(1.15); /* IE 9 */
  -webkit-transform: scale(1.15); /* Safari and Chrome */
}

.grid:hover li {
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  zoom: 1;
  filter: alpha(opacity=1);
  opacity: 0.3;
}

.grid li {
  float: left;
  margin: 0px 40px 75px 0px;
  display:inline;
  position:relative;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity:1;
}

.grid li img {
  margin: 0;
  width: 339px;
  height: 211px;
  position:relative;
  overflow:hidden;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  transform: scale(1);
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari and Chrome */
}

Upvotes: 2

Related Questions