Исчезать положение изображения

Question

У меня есть такой список:

<ul>
    <li><a href="#"><img src="/userfiles/test.png" alt="" /></a></li>
    <li><a href="#"><img src="/userfiles/test2.png" alt="" /></a></li>
</ul>

Каждое из этих изображений имеет ширину 950 пикселей и высоту 600 пикселей.

Первые 300 пикселей по высоте - это указатель мышиизображение и последние 300 пикселей - это изображение при наведении курсора, которое я хочу наложить.Возможно ли это?

У меня есть этот CSS, чтобы контролировать, какое изображение показывать:

ul { list-style: none; padding: 0; margin: 0; }
ul li { width: 950px; height: 300px; overflow: hidden; position: relative; }
ul li img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

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

<script type="text/javascript">
        $(document).ready(function () {
            $("ul li img").mouseover(function () {
                $(this).stop().animate(
                    { top: "-300px" },
                    { duration: 300 })
            })
            .mouseout(function () {
                $(this).stop().animate(
                    { top: "0" },
                    { duration: 300 })
            })
        });
    </script>

Answer 1

Только что завершил реализацию, спасибо за представление хорошего и достаточно короткого упражнения.

Прежде всего, посмотрите конечный результат здесь .

Замечания по реализации:

1. Рассмотрите возможность изменения разметки, если это возможно .Это было бы намного проще (я бы даже сказал, что банально), если бы вы использовали изображение как background-image, а не как отдельный элемент img, и оно также было бы более производительным.
2. Решение работает путем добавления «сестры» div для каждого элемента img и соответствующего оформления.Наиболее важным является установка свойства background-image, которое позволяет нам отображать только желаемую половину изображения.
3. Решение требует динамического расчета размера исходного изображения, что я и сделал, используя решение, представленное здесь .

Answer 2

Я думаю, у меня есть идея.Рабочий пример:

http://jsfiddle.net/avall/RMWt8/1/

Решение использует стиль overflow и играет со слоями (z-index).

Должно быть немного улучшено из-за центраошибка строки, когда вы двигаете мышкой снизу вверх, но вы должны понять.