установка видимой области изображения в css

Question

Я использую jCarousel для создания слайдера изображений логотипов.Так как изображение не должно использоваться в качестве фона, оно должно быть в теге изображения, это требование.Так что все изображения размещены в теге li.и jCarousel работает нормально.

Но здесь я должен показать только половину изображения (изображение спрайта [по умолчанию, мышь над изображением]) по умолчанию и при наведении мыши на другую часть.В css, как настроить положение изображения, чтобы показывать только половину изображения, и навести курсор мыши на другую половину.

См. Скриншот.

Спасибо

Answer 1

Во-первых, убедитесь, что ваши элементы li настроены на переполнение: скрыто.
Затем переместите ваши img влево, вне элементов li:

var neg_width_of_individual_img = -35; //may need to change this number!

$(document).ready(function(){
  $('#slideshow img').hover(
    function(){
      $(this).css('margin-left',neg_width_of_individual_img);
    },
    function () {
      $(this).css('margin-left',0);
    }
  );
});