user1910046 user1910046 - 5 months ago 16
CSS Question

Make image move down on hover

Currently when I hover over an image it moves up, I would like it to move down when hovered instead, so the top of the image aligns with all of the other images.

CODE:



$("ul.games li").hover(
function() {
$(this).addClass('active');
},
function() {
$(this).removeClass('active');
}
);

body {
background-color: #717e99;
}
section#banner .game-selector {
position: absolute;
top: 100px;
}
section#banner .game-selector ul li {
display: inline-block;
margin-right: -10px;
padding: 0px;
position: relative;
width: 300px;
height: 160px;
overflow: hidden;
cursor: pointer;
-webkit-transition: background-position 0s ease;
}
section#banner .game-selector ul li.active {
position: relative;
z-index: 100;
width: 300px;
height: 175px;
background-position: center bottom;
}
section#banner .game-selector ul li.minecraft {
background-image: url('http://i.imgur.com/UK5lBRh.png');
background-position: center top;
}
section#banner .game-selector ul li.csgo {
background-image: url('http://i.imgur.com/UK5lBRh.png');
background-position: center top;
}
section#banner .game-selector ul li.gmod {
background-image: url('http://i.imgur.com/UK5lBRh.png');
background-position: center top;
}
section#banner .game-selector ul li.tf2 {
background-image: url('http://i.imgur.com/UK5lBRh.png');
background-position: center top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="banner">
<div class="container">
<div class="row">
<div class="game-selector">
<ul class="games">
<li class="csgo"></li>
<li class="minecraft"></li>
<li class="gmod"></li>
</ul>
</div>
</div>
</div>
</section>





JSFiddle

Answer

Add top:5px to the .active, change your height:175px in .active to 160px which was the default you had.

Also I improved your jQuery code a bit.

$("ul.games li").hover(function() {
  $('ul.games li').removeClass("active");
  $(this).addClass("active");
});
body {
  background-color: #717e99;
}
section#banner .game-selector {
  position: absolute;
  top: 100px;
}
section#banner .game-selector ul li {
  display: inline-block;
  margin-right: -10px;
  padding: 0px;
  position: relative;
  width: 300px;
  height: 160px;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: background-position 0s ease;
}
section#banner .game-selector ul li.active {
  position: relative;
  z-index: 100;
  width: 300px;
  height: 160px;
  background-position: center bottom;
  top: 5px
}
section#banner .game-selector ul li.minecraft {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.csgo {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.gmod {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.tf2 {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="banner">
  <div class="container">
    <div class="row">
      <div class="game-selector">
        <ul class="games">
          <li class="csgo"></li>
          <li class="minecraft"></li>
          <li class="gmod"></li>
        </ul>
      </div>
    </div>
  </div>
</section>