Hover One

 Css3 Hover Effect

File Download⏷

 

HTML

<div class="service-card">
   <a href="#url"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ5Avk6CPBCxopZhBcqPgGKe2LQ_Aarox7PDzlhgUUNO_P9qRGsAuRIj8R2t3g_Aq1uOIS68vHLH1pw9A5752R7bg_XkCMpYRZ2HiNvZBfTpMwFrAuxqIqADTKGng7mYl92xy-HsXpl4_q/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieQpB_IjnaC3hnuVnCEiHH0o5zTBkJk-KvbbNtwCtAytvV7TQcSwJ4Y7ax8j9R9utb8Cta1LWVGtI8AGMYZlEaAq1oFHwxxiWy-bDAbEQXysU8f4-5j6zRkrk1k6HzF6FxVAaJrWwb5SSY/h120/service-shape1.png" alt="Images"> </div>
   <div class="service-shape-2"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7vyIa6FsyMTjLz0mg6KpwL7AG5o4sFbX7QD56ZjFN-aaM-0ZuO9Ia7pzMyeHj-QpjlLq8zrEGoxlzUq-qnPX7rA8dPxFdvceMJWUeYVP1S2YyUwpHuX6-nCgO54jAHDISAPInnbwYbB1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3xQc-IlhQgixddi7IvalOarxt3dKM3sWcP1LOw_Ptyx7w-vQUwefLV8BjgXstBXFQgSmSXsVdZmFf2TMJ7CwHf9lPzHVbGeD408G0Vt7Bn7GNRcvuSO3RQuMwhHC4fqi-w0jJXC0My2rq/h120/kidney-icon.png") no-repeat 13px 13px;
	width: 75px;
	height: 75px;
	display: block;
}
.service-card:hover .kidney-icon {
	background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81Gmd8bFH5bQ5B6Dldht5WY7OPdKLfikh-5vHJXmlVRNCBiDjkVbjmI-CoU2wvY8xkW1GOmRGJNlGxtmN4VU5w1uRuRYJjEDMKW_LhdJEoMiQ_ATCn0qgJSB_nbJl4R92I9WCVjwaqMmM/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);
}