body {

}
 .swing {
	 animation: swing ease-in-out 1s infinite alternate;
	 transform-origin: center -20px;
	 float: left;
	 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
 .swing img {
	 border: 5px solid #f8f8f8;
	 display: block;
}
 .swing:after {
	 content: '';
	 position: absolute;
	 width: 20px;
	 height: 20px;
	 border: 1px solid #999;
	 top: -10px;
	 left: 50%;
	 z-index: 0;
	 border-bottom: none;
	 border-right: none;
	 transform: rotate(45deg);
}
/* nail */
 .swing:before {
	 content: '';
	 position: absolute;
	 width: 5px;
	 height: 5px;
	 top: -14px;
	 left: 54%;
	 z-index: 5;
	 border-radius: 50% 50%;
	 background: #000;
}
 @keyframes swing {
	 0% {
		 transform: rotate(3deg);
	}
	 100% {
		 transform: rotate(-3deg);
	}
}
/* css for Hover Starts here */
.overlay {
 background-color: rgba(20,20,20,.7);
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
          }
              
.teamh-details {
 opacity: 0;
 position: absolute;
 top: 70%;
 left: 0;
 padding: 5%;
 overflow: hidden;
 width: 100%;
 z-index: 2;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
              }
              
.teamh-details p {
  color: #fff;
  text-align: center;
              }
              
.teamh-img:hover .teamh-details {
 opacity: 1;
 margin-top: -80px;
              }
              
.teamh-img:hover .overlay {
 opacity: 1;
              }
/* css for Hover Ends here */