Hover One

 Css3 Hover Effect

File Download⏷

 

HTML

<div class="service-card">
   <a href="#url"> <img src="https://lh3.googleusercontent.com/-v93Cwl5VxEE/YIvp1TTYpiI/AAAAAAAABIA/N2lSvW1Vz2QJU17FKffoET3FBjsd3of_QCLcBGAsYHQ/h120/service-img1.jpg" alt="Images"></a>
   <div class="service-content">
      <div class="service-icon"> <i class="kidney-icon"></i> </div>
      <h3><a href="#url">Kidney Transplant</a></h3>
      <div class="content">
         <p>Armed with the highly qualified and experienced … </p>
      </div>
   </div>
   <div class="service-shape-1"> <img src="https://lh3.googleusercontent.com/-BocWUMHhrZA/YIvp2F_EshI/AAAAAAAABIE/Gw7FQwu6HnE8OjMQrkW2ztHEYi7hA5MPQCLcBGAsYHQ/h120/service-shape1.png" alt="Images"> </div>
   <div class="service-shape-2"> <img src="https://lh3.googleusercontent.com/-sqoZAkOhj0Y/YIvp2dentUI/AAAAAAAABII/SsNYpSi1XqQcDSeB9W4PLPVp1FpInxDvwCLcBGAsYHQ/h120/service-shape2.png" alt="Images"> </div>
</div>

CSS

img {
	width:100%;
}
.service-card {
	text-align: center;
	margin-bottom: 30px;
	position: relative;
	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .3);
	box-shadow: 0 0 15px rgba(0, 0, 0, .3);
	width:300px;
}
.service-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 0;
 background-color: #16213e;
 -webkit-transition: .7s;
 transition: .7s;
 opacity: 0.5;
}
.service-card:hover::before {
 height: 100%;
 opacity: .8;
}
.service-card a {
	display: block;
}
.service-card .service-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px 20px;
	background-color: transparent;
	z-index: 1;
	height: auto;
 -webkit-transition: .9s;
 transition: .9s;
	overflow: hidden;
}
.service-card .service-content::before {
 content: '';
 position: absolute;
 bottom: -60px;
 z-index: -1;
 left: 0;
 right: 0;
 width: 100%;
 height: 100%;
 background-color: #fff;
}
.service-card:hover .service-content::before {
 display: none;
}
.service-card:hover .service-content {
	top: 36%;
	-webkit-transform: translateY(-31%);
	transform: translateY(-31%);
	color:#fff;
}
.service-card .service-content .service-icon {
	font-size: 35px;
	width: 75px;
	height: 75px;
	color: #fff;
	background-color: #1fa2ff;
	line-height: 75px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
	border-radius: 50px;
	text-align: center;
	position: relative;
}
.service-card:hover .service-content .service-icon {
	background-color: #fff;
	color: #16213e;
	margin-bottom: 20px;
}
.service-card:hover .service-content h3 {
	margin-bottom: 10px;
}
.service-card .service-content h3 a {
	color: #444;
	text-decoration:none;
}
.service-card:hover .service-content h3 a {
	color: #fff;
}
.kidney-icon {
	background: url("https://lh3.googleusercontent.com/-0QUUKGzJxaM/YIvp1Wyg_KI/AAAAAAAABH8/6uq4xDkyy3Q40J5M-7G9oLVK742pkRqYACLcBGAsYHQ/h120/kidney-icon.png") no-repeat 13px 13px;
	width: 75px;
	height: 75px;
	display: block;
}
.service-card:hover .kidney-icon {
	background:url("https://lh3.googleusercontent.com/-6prI0G3kpfI/YIvp1ablYHI/AAAAAAAABH4/OE1JGoFZAgg1BSBTbgk9i4UP_CM2GtVqwCLcBGAsYHQ/h120/kidney-icon-h.png") no-repeat 13px 13px;
}
.service-card .service-content h3 {
	margin-bottom: 15px;
	font-size: 22px;
}
.service-card .service-shape-1 {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
 -webkit-transition: .7s;
 transition: .7s;
}
.service-card:hover .service-shape-1 {
	-webkit-transform: scale(1);
	transform: scale(1);
}
.service-card .service-shape-2 {
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
 -webkit-transition: .7s;
 transition: .7s;
}
.service-card:hover .service-shape-2 {
	-webkit-transform: scale(1);
	transform: scale(1);
}