Split Image | Hover Effect

index.html

<div class="placeholder"></div>

script.js

var options = {
  imgSrc : "https://unsplash.it/g/1024/768?image=874",
  containerName : "placeholder",
  rows:5,
  columns:5,
  margin:2.5,
  animTime: 0.3
}

function ImageGrid(defaults)
{
  var r = defaults.rows;
  var c = defaults.columns;
  var margin = defaults.margin;
    
  var placeholder = document.getElementsByClassName(defaults.containerName)[0];
  var container = document.createElement('div');
  container.className = "gridContainer";
  placeholder.appendChild(container); 
    
  var gridTile;  

  var w = (container.offsetWidth / c) -margin;
  var h = (container.offsetHeight / r) -margin;
  var arr = [];
    
  for (var i=0, l=r*c; i < l; i++)
  {    
    gridTile = document.createElement('div');
    gridTile.className = "gridTile";
    gridTile.style.backgroundImage = "url("+defaults.imgSrc+")";
    
       
    arr = [(w+margin)*(i%c), (h+margin)*Math.floor(i/c), ((w+margin)*(i%c)+w-margin), (h+margin)*Math.floor(i/c), ((w+margin)*(i%c)+w-margin), ((h+margin)*Math.floor(i/c) + h-margin), (w+margin)*(i%c), ((h+margin)*Math.floor(i/c) + h-margin)];
        
   // console.log(i + " ====>>> " + arr + " ||||| " + i%c  + " |||||| " + i/c);  
    
        
    TweenMax.set(gridTile, {webkitClipPath:'polygon('+arr[0]+'px '+ arr[1]+'px,'+arr[2]+'px '+arr[3]+'px, '+arr[4]+'px '+ arr[5] +'px, '+arr[6]+'px '+ arr[7] +'px)', clipPath:'polygon('+arr[0]+'px '+ arr[1]+'px,'+arr[2]+'px '+arr[3]+'px, '+arr[4]+'px '+ arr[5] +'px, '+arr[6]+'px '+ arr[7] +'px)'});
       
    container.appendChild(gridTile);    
    
    fixTilePosition(gridTile, i);
  }
  
  placeholder.addEventListener("mouseover", function(e){
    var allTiles = e.currentTarget.querySelectorAll(".gridTile");
    for (var t=0, le = allTiles.length; t < le; t++)
      {
        TweenMax.to(allTiles[t], defaults.animTime, {css:{backgroundPosition:"0px 0px"}, ease:Power1.easeOut});
      }
  })
                             
  placeholder.addEventListener("mouseleave", function(e){
    var allTiles = e.currentTarget.querySelectorAll(".gridTile");
    for (var ti=0, len = allTiles.length; ti < len; ti++)
      {
        fixTilePosition(allTiles[ti], ti, defaults.animTime);
      }
  })
  
  function fixTilePosition(tile, ind, time)
  {
    if(time==null)time=0;
    var centr, centrCol, centrRow, offsetW, offsetH, left, top;
    
    centr = Math.floor(c * r / 2);
    centrCol = Math.ceil(centr/c);
    centrRow = Math.ceil(centr/r);
        
    offsetW = w/centrCol;
    offsetH = h/centrRow;
    
    left = (Math.round((ind % c - centrCol + 1) * offsetW));
    top = (Math.round((Math.floor(ind/c) - centrRow + 1) * offsetH));
    
    //console.log(left, top)
    
    TweenMax.to(tile, time, {css:{backgroundPosition:left+"px "+top+"px"}, ease:Power1.easeOut});
  }
}

ImageGrid(options);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

split-image-hover-effect.markdown

Split Image | Hover Effect

grid | clip -path | image effect | hover

set rows/columns/margin

inspired by hermes_mereghetti http://www.hermesmereghetti.com/new/albums/collage/

A Pen by Dimitra Vasilopoulou on CodePen.

License.

style.css

body{background-color:#1A1919;text-align:center;}

.placeholder{
  display:inline-block;
  position:relative;
  width:600px;
  height:600px;
  overflow:hidden;
  box-sizing:border-box;
  margin-top:100px;
}

.gridContainer{
  width:100%;
  height:100%;
}

.gridTile
{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-size:cover;
  background-repeat:no-repeat;
  background-origin:center;
}