sambkim portfoliotm

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'
});