Archie Goodwin

Вдохновился видом материалов в гугловском магазине приложений к браузеру Chrome. Решил сделать нечто подобное под себя. Нарисовал в фотошопе макет.

Но макет макетом, а как же при наведении на этот материал технически сделать чтобы верхний обьект (с постером и тайтлом) каким-то образом прятался и показывался обьект под ним (с кратким описанием и какой-то инфой по материалу)? В общем как технически это реализовать?

Для начала пропишем такой код jQuery:

<script type="text/javascript"> 
 $(document).ready(function(){ 
 $("#ID").hover( 
 function() { 
 $(this).stop().animate({"opacity": "1"}, "fast"); 
 }, 
 function() { 
 $(this).stop().animate({"opacity": "0"}, "fast"); 
 }); 
 
 }); 
</script>

ID - id верхнего элемента, который собственно и будем показывать при наведении

fast - индикатор скорости анимации, при желании можно выставить другую скорость - slow (медленно) или указать во временном эквиваленте от 200 до 600 (миллисекунды)

opacity - параметр, который собственно и регулирует прозрачность обьекта (изменяется от 0 до 1), в нашем случае мы первый, верхний слой делаем полностью прозрачным по умолчанию и полностью видимым при наведении, вы же можете экспериментировать)

Далее, нам необходим элементарный html код дабы заставить это работать:

<div class="block2"></div> 
<div class="block1" id="ID"></div>

Ну и чтобы показать пример для этих блоков зададим css

.block1 {width:241px; height:201px; background:url(http://archie-goodwin.net/demo/Post-view-full-.jpg) no-repeat; background-position: right top;opacity:0;margin-top:-201px;cursor:pointer;} 
.block2 {width:241px; height:201px; background:url(http://archie-goodwin.net/demo/Post-view-full-.jpg) no-repeat; background-position: left top;}

Убедиться работоспособности можно на странице демо-просмотра, единственное, что в данном случае я использовал блок с фоном для простоты, поэтому со стороны этот скрипт можно принять за CSS спрайты. Но вы можете в блок с классом block1 напихать множество других блоков (верстайте на здоровье в пределах вашей фантазии), создав "живой элемент", а не просто блок с фоном картинки. Точно также можно поступить и с block2, это и позволит создать полноценный вид материалов с живой анимацией.