Update 'notitleyet/style.css'

notitleyet/style.css

@@ -73,6 +73,169 @@ body{
   	background-color:  #b0b0b0;
 }
 
+figcaption {
+	font-size: 1em;
+	display: inline-block;
+	padding: 12px 0 0 1.2px;
+	height: 3em;
+	color: rgb(60, 60, 60);
+	}
+figure {
+	max-width: 47%;
+	float: left;
+	padding: 0;
+	margin: 14px;
+	position: relative;
+}
+img {
+	max-width: 100% !important;
+	width: 100% !important;
+	outline: 1.5px solid rgb(0, 0, 0);
+}
+
+#publication {
+	clear:both;
+}
+
+#myGallery {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-content: center;
+	justify-content: center;
+	align-items: flex-start;
+}
+
+img.still {
+	position: absolute;
+	max-width: 100% !important;
+	padding: 0% 0% 0% 0 !important;
+	z-index: 10;
+}
+
+img.workimg {
+	position: relative !important;
+	outline: 1.5px solid rgb(0, 0, 0);
+	padding: 0 !important;
+	width: 100% !important;
+	max-width: 100%!important;
+}
+
+figure:hover > img.still, figure:focus-within > img.still, figure:active > img.still, figure:hover > .fade-in, figure:focus-within > .fade-in, figure:active > .fade-in{
+	visibility: hidden;
+}
+p.fade-in {
+	font-size: 2.3em!important;
+	display: inline-block;
+	position: absolute;
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	text-align: center;
+	color: rgb(255, 255, 255)!important;
+	padding-top: 50%;
+	margin-top: 50%;
+	/*background: rgba(0, 0, 0, 0.546);*/
+	animation: fadeIn ease 5s;
+	animation-iteration-count:infinite;
+	-webkit-animation: fadeIn ease 5s;
+	-moz-animation: fadeIn ease 5s;
+	-o-animation: fadeIn ease 5s;
+	-ms-animation: fadeIn ease 5s;
+	opacity: 0;
+}
+@keyframes fadeIn {
+  0% {
+	opacity:0;
+  }
+  35% {
+	opacity:0;
+  }
+  50% {
+	opacity:1;
+  }
+  65% {
+	opacity:0;
+  }
+  100% {
+	opacity:0;
+	}
+}
+
+@-moz-keyframes fadeIn {
+  0% {
+	opacity:0;
+  }
+  35% {
+	opacity:0;
+  }
+  50% {
+	opacity:1;
+  }
+  65% {
+	opacity:0;
+  }
+  100% {
+	opacity:0;
+	}
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+	opacity:0;
+  }
+  35% {
+	opacity:0;
+  }
+  50% {
+	opacity:1;
+  }
+  65% {
+	opacity:0;
+  }
+  100% {
+	opacity:0;
+	}
+}
+
+@-o-keyframes fadeIn {
+  0% {
+	opacity:0;
+  }
+  35% {
+	opacity:0;
+  }
+  50% {
+	opacity:1;
+  }
+  65% {
+	opacity:0;
+  }
+  100% {
+	opacity:0;
+	}
+}
+
+@-ms-keyframes fadeIn {
+  0% {
+	opacity:0;
+  }
+  35% {
+	opacity:0;
+  }
+  50% {
+	opacity:1;
+  }
+  65% {
+	opacity:0;
+  }
+  100% {
+	opacity:0;
+	}
+}
+
+
 /*header*/
 
 header{
@@ -679,9 +842,9 @@ section#main{
 	top:0;
 	bottom:0;
 	overflow:hidden;
-	left:25%;
+	left:0%;
-	width:75%;
+	width:70%;
-	padding-left:1%;
+	padding-left:0%;
 
 }
 
@@ -855,14 +1018,26 @@ header h1{
 
 /*main*/
 
+                img.still {
+                    position: absolute;
+                    max-width: 100% !important;
+                    padding: 0.5% 0.5% 0.5% 0 !important;
+                }
+
+                figure:hover > img.still, figure:focus-within > img.still, figure:active > img.still, figure:hover > .fade-in, figure:focus-within > .fade-in, figure:active > .fade-in{
+                    visibility: hidden;
+                }
+
+
+
 section#main{
 	position:relative;
 	top:0;
 	bottom:0;
 	overflow:hidden;
-	left:25%;
+	left:0%;
-	width:75%;
+	width:70%;
-	padding-left:1%;
+	padding-left:0%;
 
 }