Hover при наведении на карточку специалиста

для портфолио или сайта

by Denis Tverdokhlebov

HTML

<script src="http://fonts.googleapis.com/css?family=Play:400,700"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->

<aside class="profile-card">
  
  <header>
    
    <!-- here’s the avatar -->
    <a href="http://tutsplus.com">
      <img src="http://i.imgur.com/csYR2xo.jpg?1">
    </a>

    <!-- the username -->
    <h1>Prashant Kandwal</h1>
    
    <!-- and role or location -->
    <h2>Web Developer</h2>
    
  </header>
  
  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">
    
    <p>I am a web developer from <span>India ♥</span>. I create responsive, pixel-perfect webpages from PSD designs.</p>
    
  </div>
  
  <!-- some social links to show off -->
  <ul class="profile-social-links">
    
    <!-- twitter - el clásico  -->
    <li>
      <a href="https://www.facebook.com/prashant.kandwal.3">
        <i class="fa fa-facebook-f"></i>
      </a>
    </li>
    
    <!-- envato – use this one to link to your marketplace profile -->
    <li>
      <a href="http://twitter.com/tutsplus">
        <i class="fa fa-twitter"></i>
      </a>
    </li>
    
    <!-- codepen - your codepen profile-->
    <li>
      <a href="http://codepen.io/Prish">
        <i class="fa fa-codepen"></i>
      </a>
    </li>
    
    <!-- add or remove social profiles as you see fit -->
    
  </ul>
  
</aside>
<!-- that’s all folks! -->

CSS

::selection {
    background-color: #24b694;
    color: #fff;
    }
::-moz-selection {
    background-color: #24b694;
    color: #fff;
    }
		

body {
    z-index: 1;
    overflow: hidden;
    height: 100%;
  font-family: "Play", sans-serif;
    }

body:after {
    content: " ";
    position: absolute;
    background-image: url('http://i.imgur.com/ObeFgFB.jpg?1');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-filter: blur(1px);
    filter: blur(1px);
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
    }

body:hover:after {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    }

.profile-card {
    width: 340px;
    margin: 7% 25%;
    z-index: 11;
    position: fixed;
    -moz-transition: 0.5s linear 0s;
    -o-transition: 0.5s linear 0s;
    -webkit-transition: 0.5s linear 0s;
	 -moz-transform: translate(55px, 55px);
    -ms-transform: translate(55px, 55px);
    -o-transform: translate(55px, 55px);
    -webkit-transform: translate(55px, 55px);
    transform: translate(55px, 55px);
    transition: 0.5s linear 0s;
    }

.profile-card:hover {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -moz-box-shadow: 30px 30px 3px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: 30px 30px 3px rgba(0, 0, 0, 0.31);
    box-shadow: 30px 30px 3px rgba(0, 0, 0, 0.31);
    -moz-transition: 0.5s linear 1.5s;
    -o-transition: 0.5s linear 1.5s;
    -webkit-transition: 0.5s linear 1.5s;
    transition: 0.5s linear 1.5s;
    }

.profile-card:hover header {
    padding: 20px 0 63px;
    -moz-transition: 0.5s linear 0s;
    -o-transition: 0.5s linear 0s;
    -webkit-transition: 0.5s linear 0s;
    transition: 0.5s linear 0s;
   ...