Profile Image Hover Effect

index.html

<div class="profile_container scream">
  <div class="background"></div>
  <div class="foreground">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/261873/surprised_mimi_500x500_saturated.png" alt="" class="profile">
  </div>
</div>

<div class="profile_container la">
  <div class="background"></div>
  <div class="foreground">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/261873/serious_mimi_500x500.png" alt="" class="profile">
  </div>
</div>

profile-image-hover-effect.markdown

Profile Image Hover Effect

vertigo

--set number of circles for the effect

A Pen by Dimitra Vasilopoulou on CodePen.

License.

script.js

function ProfileVertigo(container, bgSteps){
  var bg = container.querySelector(".background");
  var bgWidth = bg.offsetWidth;
  
  for (var c=0; c < bgSteps; c++)
  {
    var bgcircle = document.createElement('div');
    bgcircle.className = "bgCircle";
    var percent = ((bgSteps-c) * (1/bgSteps));
    bgcircle.style.width = bgcircle.style.height = (bgWidth * percent) + "px";
    bgcircle.style.backgroundSize = bgWidth + "px " + bgWidth + "px";
    bg.appendChild(bgcircle);
  }
  
  container.addEventListener("mouseover", function(e){
    var circlesAll = e.currentTarget.querySelectorAll(".bgCircle");
    var bgWidth = e.currentTarget.offsetWidth;
    var percent;
    for (var bgC = 0, leng= circlesAll.length; bgC < leng; bgC++){
      percent = ((bgSteps-bgC) * (1/bgSteps));
      TweenMax.to(circlesAll[bgC], .3, { backgroundSize:""+ (bgWidth * (percent)) +"px "+(bgWidth * (percent))+"px", ease:Power3.easeOut, rotation:0*bgC+"deg"});
    }
    
    var img = e.currentTarget.querySelector(".profile");    
    TweenMax.to(img, 0.3, {width:"93%", ease:Power3.easeOut});
  })
  
  container.addEventListener("mouseleave", function(e){
    var circlesAll = e.currentTarget.querySelectorAll(".bgCircle");
    var bgWidth = e.currentTarget.offsetWidth;
    for (var bgC = circlesAll.length-1; bgC >= 0; bgC--){
      TweenMax.to(circlesAll[bgC], .3, {backgroundSize:bgWidth + "px " + bgWidth + "px",  ease:Power3.easeIn, rotation:"0deg"});
    }
    
    var img = e.currentTarget.querySelector(".profile");
    TweenMax.to(img, 0.3, {width:"85%" , ease:Power3.easeIn});
    
  })
}

ProfileVertigo(document.querySelector(".scream"), 8);
ProfileVertigo(document.querySelector(".la"), 6);

scripts

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

style.css

body{background-color:#1d2023;text-align:center;}
.profile_container{
  margin:50px;
  display: inline-block;
  border-radius:50%;
  width:500px;
  height:500px;
  position:relative;
  overflow:hidden;
}

.bgCircle{
  background: url("https://unsplash.it/500/500?image=545") no-repeat;
  position: absolute;
  border-radius:50%;
  transform:translate(-50%, -50%);
  top:50%;
  left:50%;
  background-position:center;
}

.la .bgCircle{
  background-image: url("https://unsplash.it/500/500?image=645");
}

.foreground{
  position:absolute;
  width:100%;
  height:100%;
}

.foreground img{
  position:absolute;
  width:85%;
  height:auto;
  bottom:0px;
  left:50%;
  transform:translateX(-50%);
}