Merge branch 'master' of https://github.com/ThetaHacks/thetahacks.github.io

Author: rohan-bansal

css/main.css

@@ -110,8 +110,12 @@ figure {
   position: relative;
   z-index: 1;
 
+  border: 5px transparent;
+
+  background-clip:content-box;
 }
 
+
 .figure-image-container {
   background: transparent;
   position: relative;
@@ -123,7 +127,15 @@ figure {
   min-height: 100px;
   margin-left: auto;
   margin-right: auto;
-  
+
+  border-radius: 180px;
+
+  transition: transform 0.3s ease-out;
+
+}
+
+.figure-image-container:hover {
+  transform: scale(1.05);
 }
 
 .figure-image-container:after {
@@ -133,10 +145,13 @@ figure {
   left: calc(-1 * 5px);
   height: calc(100% + 5px * 2);
   width: calc(100% + 5px * 2);
+  
   background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
   border-radius: 180px;
   animation: animatedgradient 3s ease alternate infinite;
   background-size: 300% 300%;
+
+  transition: transform 0.3s ease-out;
 }
 
 
@@ -159,11 +174,9 @@ figure {
 
 .figure-image:hover,
 .figure-image-e:hover {
-  transform: scale(1.05);
 }
 
 .figure-image-e3:hover {
-  transform: scale(1.05);
 }
 
 .row100:hover {
@@ -205,9 +218,17 @@ figure {
   max-height: 200px;
   min-width: 80px;
   min-height: 80px;
+
+  transition: transform 0.3s ease-out;
+
+  border-radius: 180px;
 
 }
 
+.figure-image-container-e:hover {
+  transform: scale(1.05);
+}
+
 .figure-image-container-e:after {
   content: '';
   position: absolute;
@@ -220,9 +241,12 @@ figure {
   z-index: -1;
   animation: animatedgradient 3s ease alternate infinite;
   background-size: 300% 300%;
+
+  transition: transform 0.3s ease-out;
 }
 
 
+
 @keyframes animatedgradient {
 	0% {
 		background-position: 0% 50%;
@@ -270,8 +294,15 @@ figure {
   min-width: 80px;
   min-height: 80px;
 
+  transition: transform 0.3s ease-out;
+
+  border-radius: 180px;
+  
 }
 
+.figure-image-container-e3:hover {
+  transform: scale(1.05);
+}
 .figure-image-container-e3:after {
   content: '';
   position: absolute;
@@ -284,10 +315,13 @@ figure {
   animation: animatedgradient 3s ease alternate infinite;
   z-index: 0 !important;
   background-size: 300% 300%;
+
+  transition: transform 0.3s ease-out;
 }
 
 
 
+
 .figure-caption {
   color: lightgray;
   font-size: 1.4rem !important;
@@ -529,6 +563,18 @@ a:focus {
     width: 14vw;
     height: 14vw;
   }
+  .figure-image-container {
+    width: 20vw !important;
+    height: 20vw !important;
+  }
+  .figure-image-container-e3 {
+    width: 14vw !important;
+    height: 14vw !important;
+  }
+  .figure-image-container-e {
+    width: 14vw !important;
+    height: 14vw !important;
+  }
   .directors {
     padding: 0vw 12.5vw;
   }
@@ -550,6 +596,11 @@ a:focus {
   }
 }
 
+.directors > figure {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
 #ssssc {
   min-height: 760px;
 }