Simple CSS - Responsive vCard & Title Attribute

Responsive vCard & Title Attribute

I'm creating a demo of responsive vCard box as well as giving a demo about "title" attribute. With the help of CSS we can stylized "title" attribute too like other elements.

Demo
HTML
CSS
JS
Edit Online
Download


<div class="vCard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3nF77G71_dDwfHSm4tH1WNNA4BTzQ1t0vYIxhE5u342sRI11yvl_OVe2VIHf7rm9we5anAaVD78FBgJ_b7pIZCoD6h3W2Ra6E3ct4_1B3Bgb7bLdb3I8pV_lXZWGvXRY9Ztsh1sREBzQ/s1600/Pawan+Mall+-+Profile+Pic-Small.jpg" />


  <h1>Hi, I am Pawan Mall!</h1>

<p>I'm something poet, marketer, social media consultant, web designer/developer/programmer,
blogger(as hobby) & a good human being. Originally from Gorakhpur, UP and currently living in
New Delhi, India. ..
 </p>

  <ul>
    <li><a href="#Twitter" title="Follow me on : Twitter">Twitter</a><li>
    <li><a href="#Facebook" title="Follow me on : Facebook">Facebook</a><li>
    <li><a href="#Google+" title="Follow me on : Google+">Google+</a><li>
    <li><a href="#CSSdeck" title="Follow me on : CSSdeck">CSSdeck</a><li>
    <li><a href="#CodePen" title="Follow me on : CodePen">CodePen</a><li>
  </ul>
  
</div>


/* 
// Simple CSS - Responsive vCard & Title(Attribute)
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net 
*/

@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);

body{margin:0px;padding:0px;}

.vCard{
  margin:4% auto;
  padding:15px;
  width:80%;
  background-color:#fff;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  border-radius:10px;
}
.vCard img{
  margin:10% 0% 0% 30%;
  height:auto;
  width:35%;
  border-radius:50%;
  border:double 10px #CCC;
  box-shadow: 0 7px 4px #777;
}
.vCard h1{
  font-family: 'Lobster', cursive;
  text-align:center;
  text-shadow: 0 2px 1px #777;
}
.vCard p{
  font-family: 'Indie Flower', cursive;
  text-align:center;
  text-shadow: 0 2px 1px #777;
}

.vCard ul{
  list-style:none;
}
.vCard ul > li{
  display:inline-block;
  padding:5px;
  margin-bottom:10px;
  font-family: 'Shadows Into Light', cursive;
  
}
.vCard a:link, a:visited{
  text-decoration:none;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding:5px;
  border-radius:10px 0px 10px 0px;
  color:#000;
  font-weight:bolder;
}

.vCard a:hover{
  box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
  border-radius:0px 10px 0px 10px;
}

.vCard a[title]{
    position:relative;
    
}
.vCard a[title]:before{
 content: "";
 position:absolute;
 bottom:10px;
 border-width: 14px 7px;
 border-style: solid;
 border-color:#3c404b  transparent transparent transparent;
 left:-9999px;
    opacity:0;
 transition:.75s opacity, .75s bottom;
  
}

.vCard a[title]:after{
    content:attr(title);
    color: #FFF;
    font:bold 16px arial, sans-serif;
    background:#3c404b;    
    padding:10px;    
    position:absolute;
    left:-9999px;
    opacity:0;
    bottom:38px;
    white-space:nowrap;
    border-radius:8px;  
   transition:.75s opacity, .75s bottom;
    font-family: 'Indie Flower', cursive;
}

.vCard a[title]:hover:before{
 left:35px;
    opacity:1;
    bottom: 30px;
    
}
.vCard a[title]:hover:after{
    left:0px;
    opacity:1;
    bottom: 58px;
}
/* Animation Effect - effectRotateOut */
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}

.vCard img:hover
{
animation:rotateOut 1s ;
-webkit-animation:rotateOut 1s ; /* Safari and Chrome */
}