<div class="container">
  <div class="row">    
    <div class="col-xs-12">

      <div class="card">                

        <div class="card-image"> 
          <a href="#" type="button" class="btn">
            <img src="https://farm3.staticflickr.com/2764/4350166105_be2c85cdb5_z_d.jpg" alt="user-image" />
          </a>
        </div>

        <div class="card-modal">Take a look at my Profile!</div>
        
        <div class="card-info">
          
          <div class="name">
            <p>Nunc Lorem Interdum</p> 
          </div>
          
          <div class="social-network">
            <a href="#" class="icon youtube">
              <i class="fa fa-youtube"></i>
            </a>  
            <a href="#" class="icon twitter">
              <i class="fa fa-twitter"></i>
            </a>            
            <a href="#" class="icon facebook">
              <i class="fa fa-facebook"></i>              
            </a>
          </div>
          
          <hr>
          
          <div class="content">
            <p>
              <b>Info:</b> 
              Praesent faucibus sem tortor, sed imperdiet enim interdum in. Etiam feugiat rutrum ex, quis maximus quam commodo eu. Pellentesque eget tortor convallis, vestibulum tortor in, lacinia diam.
            </p>
            <p><b>Skills:</b> Feugiat, Ipsum, Pellentesque, Maximus</p>
            <p><b>Website:</b> <a href="https://codepen.io/jaguilera">www.codepen.io</a></p>
          </div>
        </div>
      </div>    
    </div>
  </div>
</div>

@import "compass/css3";

/* Libs */
@import url("//fonts.googleapis.com/css?family=Lato:400,300,100");
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");





/* General */
*{
  box-sizing:border-box;  
  outline:none;
}


body{
  background: #bdc3c7 url("http://www.subirimagenes.com/imagedata.php?url=http://s2.subirimagenes.com/otros/9067576mar.jpg") 0 0 no-repeat;
  background-size:cover 100%;  
  color:#7f8c8d;
  font-size:16px;
  font-weight:300;
  font-family:'Lato';
  
  height:100%;  
  padding:20px 0;
}


a{
  @include transition(all .100s ease-out);
  color:#e74c3c;
  
  &:hover{
    color:#4BD3F4;
  }
}





/* Card */
.card{
  @include background-image(linear-gradient(to bottom, #fff 0%, #ecf0f1 100%));
  @include box-shadow(0 3px 10px rgba(0,0,0,0.5));
  
  display:block;
  position:relative;
  padding:20px;
}

.card{
  .card-modal{
    @include transition(all .3s cubic-bezier(.19, 1, .22, 1));
    @include border-radius(10px);
    background-color:#bdc3c7;
    color:white;

    display:none;
    position:absolute;
    top:40px;
    left:130px;
    z-index:2;
    padding:20px;
    
    &.active{      
      left:140px;
    }
   
    
    &:before{
      
      content: "";
            
      border-style: solid;
      border-width: 15px 15px 15px 0;
      border-color: transparent #bdc3c7 transparent transparent;
      
      width: 0;
      height: 0;
      display:block;
      
      position:absolute;
      top:20%;
      left:-15px;
    }
  }
}


.card{
  .card-image{
    position:absolute;
    top:20px;
    left:20px;           
  }
  
  .card-image{
    .btn{
      @include border-radius(50px);

      background-position: -45px 0;
      background-repeat:no-repeat;
      background-size:cover;
      border:0;    
      cursor:pointer;

      width:100px;
      height:100px;
      overflow:hidden;
      position:absolute;
      padding:0;      
      
      &:after{
        content: "";
        
        @include transition(all .3s cubic-bezier(.19, 1, .22, 1));
        @include border-radius(50px);
        
        border:rgba(255, 255, 255, 0.4) 50px solid;
        
        width:100%;
        height:100%;
        display:block;
        position:absolute;
        top:0;
        left:0;
        z-index:5;
      }
      
      &:hover{
        &:after{
          border-width:0;
        }
      }
    }
    
    .btn{
      img{
        display:none;
      }
    }
  }
}


.card{
  .card-info{    
    margin-left:120px;    
  }
}


.card{
  .card-info{
    .name{
      
      font-size:28px;
      font-weight:100;        

      display:inline-block;
      vertical-align:top;
      position:relative;            
    }    
  }
}


.card{
  .card-info{

    .social-network{
      font-size:0;
      
      display:inline-block;
      vertical-align:top;  
      overflow:hidden;
      margin-bottom:15px;
        
      @media(min-width:639px){
        float:right;        
        margin:5px 0 0;
        }
      
      .icon{    
        background-color:#bdc3c7;
        border:0;
        @include border-radius(50%);
        
        width:32px;
        height:32px;
        display:inline-block;
        vertical-align:top;  
        overflow:hidden;
        position:relative;
        
        margin-left:10px;
        
        &:first-child{
          margin:0;
        }
        
        &:before{
          @include transition(all .500s cubic-bezier(.19, 1, .22, 1)); 
          @include border-radius(16px);
          
          content: "";
          width:32px;
          height:32px;
          display:block;
          position:absolute;
          top:0;
          left:0;
          z-index:1;
        }

        &.facebook{
          &:before{
            border:rgba(59,89,152, 0.7) 0 solid;
          }
          &:hover{
            &:before{                            
              border-width:30px;
            }
          }
        }
        
        &.twitter{
          &:before{
            border:rgba(15,191,242, 0.7) 0 solid;
          }
          &:hover{
            &:before{                            
              border-width:30px;
            }
          }
        }
        
        &.youtube{
          &:before{                            
            border:rgba(179,18,23, 0.7) 0 solid;
          }
          &:hover{
            &:before{                            
              border-width:30px;
            }
          }
        }

        i{          
          color:white;
          font-size:16px;
          text-align:center;

          width:100%;
          height:100%;
          position:absolute;    
          top:50%;  
          z-index:1;
          margin-top:-7px;
        }        
      }
    }
  }
}


.card{
  .card-info{
    hr{
      margin:0 0 15px;
    }
  }
}

/* From img to background */
bg_image_replace(".card-image a img", ".card-image a");

function bg_image_replace(image, parent){   
  $(image).each(function(index,elem){
    
    var src = $(elem).attr("src"),
        $parent = $(elem).closest(parent);       
    
    $parent.css("background-image","url(" + src + ")");    
  });   
}


/* Review */
$( '.card-image' ).mouseover(function(){
        $('.card-modal').fadeIn(100).toggleClass('active');
    }).mouseout(function(){
        $('.card-modal').fadeOut(100).toggleClass('active');
    });