Flex
html
<div class="rk-portfolio__items">
<div class="rk-item rk-item--flex item-4 rk-item--hover"
data-bg-src="origin"
data-img-src="assets/img/project-3.jpg">
<!-- meta -->
</div>
...
</div>
js
var flexHover = new peHoverImg();
flexHover.init({
reverse: true
});
Static
html
<div class="ae-grid">
<div class="ae-grid__item item-lg--auto">
<div class="rk-item rk-item-static--hover" data-bg-src="assets/img/project-6.jpg">
<img src="assets/img/project-3.jpg" />
<!-- meta -->
</div>
</div>
...
</div>
js
var staticHover = new peHoverImg();
staticHover.init({
elems: '.rk-item-static--hover',
transition: '1.3s'
});
Masonry
html
<div class="ae-masonry">
<div class="rk-item ae-masonry__item rk-item-masonry--hover">
<img src="assets/img/project-1.jpg" />
<!-- meta -->
</div>
...
</div>
js
var masonryHover = new peHoverImg();
masonryHover.init({
elems: '.rk-item-masonry--hover',
bgSrc: 'assets/img/project-11.jpg'
});
