Сделать снимок изображения вниз на hover

Question

В настоящее время, когда я наводил изображение, он перемещается вверх, я хотел бы, чтобы он переместился вниз, когда навел курсор вместо этого, поэтому верхняя часть изображения совпадает со всеми остальными изображениями.

КОД:

$("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 1

top:5px Добавить в .active, изменить ваш height:175px в .active к 160px, который был по умолчанию у вас.

Также я немного улучшил код jQuery.

$("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>

Answer 2

Вы можете просто использовать CSS парение, вместо зависания JQuery. используйте transform: translateY(), чтобы легко перемещать div, не нарушая при этом другого содержимого.

section#banner .game-selector ul li:hover { 
    transform: translateY(5px); 
} 

Вот обновленная скрипка: https://jsfiddle.net/4zh08gr5/3/