animation

assets/scss/layouts/photos.scss

@@ -1,5 +1,4 @@
 .photos-list {
-
 	.photos-list-title {
 		margin-bottom: 1em;
 		.fa {
@@ -25,7 +24,6 @@
 					--width: 100%;
 				}
 			}
-
 		}
 		&.photos-list-photos-len-2 {
 			grid-template-columns: repeat(2, 1fr);
@@ -46,7 +44,11 @@
 		display: block;
 		transition: opacity 0.2s;
 		span#caption {
-		transition: width .5s ease,height .5s ease, border-radius .5s ease, overflow .5s cubic-bezier(1, -0.44, 1, -0.46);
+			transition:
+				width 0.5s ease,
+				height 0.5s ease,
+				border-radius 0.5s ease,
+				overflow 0.5s cubic-bezier(1, -0.44, 1, -0.46);
 			display: block;
 			background-color: rgba(27, 27, 27, 0.7);
 			color: white;
@@ -65,7 +67,6 @@
 			transform: translate(-50%, -50%);
 			border-radius: 100%;
 		}
-
 	}
 	.photos-list-item:hover {
 		opacity: 0.8;
@@ -77,6 +78,7 @@
 			overflow: auto;
 			padding: 10px;
 			border-radius: 0;
+			animation: in 1s;
 		}
 	}
 
@@ -84,7 +86,25 @@
 		float: right;
 	}
 }
-
+@keyframes in {
+	0% {
+		overflow: hidden;
+	}
+	90% {
+		overflow: hidden;
+	}
+	100% {
+		overflow: auto;
+	}
+}
+// @keyframes out {
+// 	0% {
+// 		overflow: auto;
+// 	}
+// 	10% {
+// 		overflow: hidden;
+// 	}
+// }
 
 @media (max-width: $responsive-medium) {
 	.photos-list {