<div class="sets">
    <div class="itm">
        <div class="itm-wrap">
            <div class="itm-info">
                <h3 class="itm-head">Dave Conner</h3>
                <p class="itm-text">Front-end Dev</p>
                <svg class="itm-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
                  <path d="M0,10h12V2H0z M1.3,3l4.7,3l4.7-3l0.5,1.1L6,7.5L0.8,4.2L1.3,3z"></path>
                </svg>
                <svg class="itm-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
                  <path class="background"  d="M9.4,1.4C8.5,0.5,7.3,0,6,0S3.4,0.5,2.5,1.4C1.6,2.3,1.1,3.6,1.1,4.9s0.5,2.4,1.4,3.3
                    s2.1,1.4,3.5,1.4V12l3.4-3.6c0.9-0.9,1.4-2.1,1.4-3.4S10.3,2.3,9.4,1.4z"></path>
                </svg>
                <svg class="itm-icon larger" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve" >
                  <path d="M11,13h1v2H8l0-2h1V9H8l0-2h3V13z"></path>
                  <rect x="9" y="4" width="2" height="2"></rect>
                </svg>
            </div>
            <img class="itm-avatar" src="https://pbs.twimg.com/profile_images/468537320581238784/BVSoNzeI_bigger.jpeg">
        </div>
    </div>

    <div class="itm">
        <div class="itm-wrap">
            <div class="itm-info">
                <h3 class="itm-head">Cindy Lopper</h3>
                <p class="itm-text">Software Engineer</p>
                <svg class="itm-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
                  <path d="M0,10h12V2H0z M1.3,3l4.7,3l4.7-3l0.5,1.1L6,7.5L0.8,4.2L1.3,3z"></path>
                </svg>
                <svg class="itm-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
                  <path class="background"  d="M9.4,1.4C8.5,0.5,7.3,0,6,0S3.4,0.5,2.5,1.4C1.6,2.3,1.1,3.6,1.1,4.9s0.5,2.4,1.4,3.3
                    s2.1,1.4,3.5,1.4V12l3.4-3.6c0.9-0.9,1.4-2.1,1.4-3.4S10.3,2.3,9.4,1.4z"></path>
                </svg>
            </div>
            <img class="itm-avatar" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65463/client2.jpg">
        </div>
    </div>

    <div class="itm">
        <div class="itm-wrap">
            <div class="itm-info">
                <h3 class="itm-head">George Lopez</h3>
                <p class="itm-text">UX Designer</p>
                <svg class="itm-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
                  <path d="M0,10h12V2H0z M1.3,3l4.7,3l4.7-3l0.5,1.1L6,7.5L0.8,4.2L1.3,3z"></path>
                </svg>
                <svg class="itm-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
                  <path class="background"  d="M9.4,1.4C8.5,0.5,7.3,0,6,0S3.4,0.5,2.5,1.4C1.6,2.3,1.1,3.6,1.1,4.9s0.5,2.4,1.4,3.3
                    s2.1,1.4,3.5,1.4V12l3.4-3.6c0.9-0.9,1.4-2.1,1.4-3.4S10.3,2.3,9.4,1.4z"></path>
                </svg>
            </div>
            <img class="itm-avatar" style="background: #00B4BB;" src="https://lh3.googleusercontent.com/-VetalvdAVZk/VlCMalt2EGI/AAAAAAAAAJY/kO_r5irJBGI/s200-Ic42/boy.png">
        </div>
    </div>

    <div class="itm">
        <div class="itm-wrap">
            <div class="itm-info">
                <h3 class="itm-head">Taylor Jones</h3>
                <p class="itm-text">Front-end Dev</p>
                <svg class="itm-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
                  <path d="M0,10h12V2H0z M1.3,3l4.7,3l4.7-3l0.5,1.1L6,7.5L0.8,4.2L1.3,3z"></path>
                </svg>
                <svg class="itm-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
                  <path class="background"  d="M9.4,1.4C8.5,0.5,7.3,0,6,0S3.4,0.5,2.5,1.4C1.6,2.3,1.1,3.6,1.1,4.9s0.5,2.4,1.4,3.3
                    s2.1,1.4,3.5,1.4V12l3.4-3.6c0.9-0.9,1.4-2.1,1.4-3.4S10.3,2.3,9.4,1.4z"></path>
                </svg>
            </div>
            <img class="itm-avatar" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65463/client1.jpeg">
        </div>
    </div>

</div>

$green: #00B4BB;
$blue: #4178BE;
$text: #aaa;
$circleSize: 4;
$marginLeft: 8;
$speed: 0.25s;

body { background: #f1f1f1; }

.sets {
    //background: #ccc;
    display: block; 
    position: relative; 
    width: 18.9375em; 
    height: 100vh; 
    margin: 0 auto;
}

.itm {
    box-shadow: 0 0.0625em 0.0625em rgba(0, 0, 0, 0); 
    color: $text;
    font-family: sans-serif;
    font-size: 1rem;
    height: #{$circleSize}em;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(.85);
    transition: width $speed ease-in, box-shadow $speed ease-in, z-index 0s linear $speed, transform $speed linear;
    width: #{$circleSize}em;
    z-index: 100;
    
    &:hover { 
        box-shadow: 0 0.0625em 0.0625em rgba(0, 0, 0, .6); 
        transform: translate(-50%, -50%) scale(1);
        transition: width $speed ease-out $speed/ 2.25, box-shadow $speed ease-out $speed/ 2.25, z-index 0s linear, transform $speed linear;
        width: $circleSize * 2.75em;
        z-index: 200;
    }
    
    &-wrap {
        background: #ffffff;
        border-radius: 50%;
        display: inline-block;
        height: 100%;
        overflow: hidden;
        position: relative;
        text-align: right;
        transition: border-radius $speed ease-in $speed/2.5; 
        width: 100%;

        .itm:hover & {
            border-radius: 0;
            transition:  border-radius $speed ease-out; 
        }
    }
    
    &-info {
        display: inline-block;
        padding: .5em;
        text-align: left;
        width: 100%;
    }
    
    &-head {
        color: $blue;
        font-size: .75em;
        font-weight: bold;
        left: -1.5em;
        line-height: 1.2;
        margin-bottom: .25em;
        opacity: 0;
        position: relative;
        transition: all $speed ease-in 0s;
        
        .itm:hover & {
            left: 0;
            opacity: 1;
            transition: all $speed ease-out $speed * 1.5;
        }
    }
    
    &-text {
        color: #333;
        font-size: .5em;
        left: -1.5em;
        line-height: 1.2;
        margin-bottom: .5em;
        opacity: 0;
        position: relative;
        transition: all $speed ease-in 0s;
        
        .itm:hover & {
            left: 0;
            opacity: 1;
            transition: all $speed ease-out $speed * 2;
        }
    }
    
    &-icon {
        cursor: pointer;
        display: inline-block;
        fill: $blue;
        height: 1em;
        left: -1.5em;
        opacity: 0;
        position: relative;
        transition: all $speed ease-in 0s;
        vertical-align: middle;
        width: 1em;
        
        & + .itm-icon { margin-left: 0.125em; }
        
        &.larger {
            height: 1.1em;
            width: 1.1em;
            margin-left: 0;
        }
        
        .itm:hover & {
            left: 0;
            opacity: 1;
            transition: all $speed ease-out $speed * 2.5;
        }
    }
    
    &-avatar {
        
        border-radius: 50%;
        bottom: 0;
        cursor: pointer;
        display: inline-block;
        height: #{$circleSize}em;
        max-width: 100%;
        position: absolute; 
        right: 0;
        transition: border-radius $speed ease-in $speed/1.5; 
        width: #{$circleSize}em;
        
        .itm:hover & {
            border-radius: 0;
            transition:  border-radius $speed ease-out; 
        }
    }
}

@for $i from 1 through 4 {
    $left:  ($i * $circleSize) * 1em;
    $calc: calc(103.5% - #{$left});
    .itm:nth-of-type(#{$i}) {
       left: $calc; 
    }
}