Added feature-section

css/main.css

@@ -181,10 +181,7 @@ a:hover {
   background-image: radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
   color: #fff;
 }
-#about p {
-  line-height: 30px;
-  font-size: 17px;
-}
+
 #contact {
   background: #f1f1f1;
 }
@@ -274,3 +271,59 @@ a:hover {
 #copyright a {
   color: #333;
 }
+
+.feature {
+	padding: 0px;
+	position: relative;
+	overflow: hidden;
+	height: 200px;
+	background-color: #000000;
+	margin-bottom: 30px;
+}
+
+.feature:hover .caption {
+	opacity: 1;
+	transform: translateY(-150px);
+	-webkit-transform: translateY(-150px);
+	-moz-transform: translateY(-150px);
+	-ms-transform: translateY(-150px);
+	-o-transform: translateY(-150px);
+}
+
+.feature img{
+	z-index: 4;
+}
+
+.feature .caption{
+	position: absolute;
+	top:150px;
+	-webkit-transition:all 0.3s ease-in-out;
+	-moz-transition:all 0.3s ease-in-out;
+	-o-transition:all 0.3s ease-in-out;
+	-ms-transition:all 0.3s ease-in-out;
+	transition:all 0.3s ease-in-out;
+	width: 100%;
+}
+
+.feature .blur{
+	background-color: rgba(0,0,0,0.7);
+	height: 300px;
+	z-index: 5;
+	position: absolute;
+	width: 100%;
+}
+
+.feature .caption-text{
+	z-index: 10;
+	color: #fff;
+	position: absolute;
+	height: 300px;
+	text-align: center;
+	top:-20px;
+	width: 100%;
+}
+
+.feature .caption-text h4 {
+	padding:15px;
+	margin-top:15px;
+}