Эффект наведения следующий за направлением курсора
Эффект при котором, при наведении на картинку курсора накладываемый слой, перемещается от одной картинки к другой в направлении движения курсора .
HTML
Для картинок и накладываемого слоя с описанием, используется неупорядоченный список:
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="#">
<img src="images/1.jpg" />
<div><span>Описание для картинки 1</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>
CSS
Элементы списка будут иметь float:left и position:relative (так как overlay слой будет иметь абсолютное позиционирование):
.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}
JS
this.$el.on('mouseenter.hoverdir, mouseleave.hoverdir', function(event) {
var $el = $(this),
$hoverElem = $el.find('div'),
direction = self._getDir($el, {
x: event.pageX,
y: event.pageY
}),
styleCSS = self._getStyle(direction);
if (event.type === 'mouseenter') {
$hoverElem.hide().css(styleCSS.from);
clearTimeout(self.tmhover);
self.tmhover = setTimeout(function() {
$hoverElem.show(0, function() {
var $el = $(this);
if (self.support) {
$el.css('transition', self.transitionProp);
}
self._applyAnimation($el, styleCSS.to, self.options.speed);
});
}, self.options.hoverDelay);
} else {
if (self.support) {
$hoverElem.css('transition', self.transitionProp);
}
clearTimeout(self.tmhover);
self._applyAnimation($hoverElem, styleCSS.from, self.options.speed);
}
});
Пример можно посмотреть на соответствующей странице.
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap CSS css CSS3 dle DLE fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как обозначается тег в HTML