Circle Image:hover

circle-image-hover.markdown

Circle Image:hover

Exploring hover states on circle profile pictures.

A Pen by Hans Engebretsen on CodePen.

License.

index.html

<ul>
  <li>
    <div class="image-wrap"><img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512_3.jpg"/></div>
    <div class="info">
      <span class="school">Harvard University</span>
      <span class="state">Cambridge, MA</span>
    </div>  
    <a href="#">FROM SIDES</a>
  </li>
  <li>
    <div class="image-wrap"><img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512_3.jpg"/></div>
    <div class="info">
      <span class="school">Harvard University</span>
      <span class="state">Cambridge, MA</span>
    </div>  
    <a href="#">SANDWICH</a>
  </li>
  <li>
    <div class="image-wrap"><img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512_3.jpg"/></div>
    <div class="info">
      <span class="school">Harvard University</span>
      <span class="state">Cambridge, MA</span>
    </div>  
    <a href="#">FROM BOTTOM</a>
  </li>
  <li>
    <div class="image-wrap"><img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512_3.jpg"/></div>
    <div class="info">
      <span class="school">Harvard University</span>
      <span class="state">Cambridge, MA</span>
    </div>  
    <a href="#">FROM TOP</a>
  </li>
</ul>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

@import "compass";
%circle-image {
	z-index:1;
	display:block;
	margin:0 auto;
	margin-bottom:.5em;
	@include border-radius(50%);
	overflow:hidden;
	width:auto;
	line-height:0;
}
%circle-image-outline {
	@extend %circle-image;
	border: 4px solid white;
  @include box-shadow(2px 3px 3px rgba(0,0,0,0.2));
	display:inline-block;
	img {
		max-width:100%;
		height:auto;
    @include border-radius(50%);
	}
}
    
ul {
  width:600px;
  margin:0 auto;
  padding:5%;
  background-color:#e9e9e9;
  @include clearfix;
  .image-wrap {
    @extend %circle-image-outline;
     background: grey;
    img {
      opacity:1;
    @include transition-property(opacity);
    @include transition-duration(.3s);
    }
    }
  li {
    list-style:none;
    float:left;
    width:22%;
    margin-right:4%;
    &:nth-child(4){margin-right:0;}
    position:relative;
    overflow:hidden;
    text-align:center;
    cursor:pointer;
    &:hover {
      .school {
      left:0;
        margin-left:0;
      }
      .state {
        left:0;
        margin-right:0;
      }
      img {
        @include opacity(.4);
      }
    }
  }
}

.info {
  text-align:center;
  font-size:.75em;
  color:white;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:40%;
}

.school {
  font-weight:bold;
  display:block;
  @include transition-property(all);
  @include transition-duration(.6s);
  margin-left:-200%;
  li:nth-child(2) &{
    margin-left:0;
    margin-top:-100%;
  }
   li:nth-child(2):hover &{
    margin-top:0
   }
   li:nth-child(3) &{
    margin-left:0;
    margin-top:200%;
  }
   li:nth-child(3):hover &{
    margin-top:0
   }
   li:nth-child(4) &{
    margin-left:0;
    margin-top:-200%;
  }
   li:nth-child(4):hover &{
    margin-top:0
   }
}

.state {
  @include opacity(.8);
  display:block;
  @include transition-property(all);
  @include transition-duration(.6s);
  margin-right:-200%;
   li:nth-child(2) &{
    margin-right:0;
    margin-top:199%;
  }
   li:nth-child(2):hover &{
    margin-top:0
   }
  li:nth-child(3) &{
    margin-right:0;
    margin-top:100%;
  }
   li:nth-child(3):hover &{
    margin-top:0
    }
  li:nth-child(4) &{
    margin-right:0;
    margin-top:-100%;
  }
   li:nth-child(4):hover &{
      margin-top:0
    }
}
a {
  position:absolute;
  top:20%;
  left:0;
  width:100%;
  display:inline-block;
  text-align:center;
  color:white;
  text-decoration:none;
  font-weight:light;
  font-size:.75rem;
  @include transition-property(all);
  @include transition-duration(.6s);
  li:hover &{
   @include opacity(0);
  }
}