Image Tile with description on hover

by Saksham Malhotra

HTML

<div class="container">
		<div class="tile image1 color1">
			<div class="tileBackground">
				<img src="https://image.flaticon.com/icons/svg/136/136553.svg" />
			</div>
			<div class="tileContent">
				<div class="tileContentContainer">
					<div class="heading">
						Sample Tile
					</div>
					<div class="description">
						This tile has a sample description which extends to the next line for sure.
					</div>
				</div>
			</div>
		</div>
	</div>

CSS

.container {
	height:280px;
	width:250px;
}

.tile {
	height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: Arial;
	color:#D6E0E2;
	flex-direction:Column;
	cursor:pointer;
}

.tile .tileContent {
	text-align: center;
  padding: 10px 20px 20px 20px;
  display: flex;
	align-items:center;
}

.tile .tileBackground {
  text-align: center;
  position: relative;
  height: 100%;
	transition: all 0.3s ease;
}

.tile:hover .tileBackground {
	height:50%;
}

.tile .tileBackground img {
	width: 50%;
  border-radius: 50%;
  background-color: rgba(250,250,250,0.2);
  left: 50%;
	top: 50%;
  margin: auto;
  position: absolute;
  transform: translate(-50%,-50%);
	padding:500px;
	transition: all 0.3s ease;
}
.tile:hover .tileBackground img {
	width:30%;
	padding:10px;
}

.tile .heading {
	font-size:32px;
	padding:0px 0px 10px 0px;
}

.tile .description {
	flex:1;
}

.tile.color1 {
	background-color:#36646E;
}