summary

profile.css

@@ -113,7 +113,7 @@ max-width: 327px;
 	.section-profile__image-body{
 
 		width: 50%;
-		height: 360px;
+		height: 100%;
 		border-left:solid 1px; 
 		margin: 0;
 		}

works1.css

@@ -6,17 +6,18 @@
 	margin: 0 auto;
 }
 
-#nav-open{
+#nav-open {
 	top: -144px;
-	}
+}
+
 .section-works1__top {
 	padding: 0 24px;
 	margin: 80px auto 120px auto;
 
 }
 
 .section-works1__title {
-	width:60%;
+	width: 60%;
 	margin: 0 auto;
 	margin-bottom: 40px;
 	text-align: left;
@@ -27,9 +28,10 @@
 
 .section-works1__title h1 {
 	font-size: 2.4rem;
-	line-height: 2.0rem; 
+	line-height: 2.0rem;
 
 }
+
 .section-works1__title h2 {
 	font-size: 1.8rem;
 	line-height: 2.0rem;
@@ -54,32 +56,35 @@
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
-    object-position: 0% 0%;	
+	object-position: 0% 0%;
 }
 
 
 
-  	/*画面サイズ1060以上での指定*/
-	  @media (min-width: 1060px) {
-.section-works1__top{
-	display: flex;
-	padding: 0 150px;
-align-items: center;
+/*画面サイズ1060以上での指定*/
+@media (min-width: 1060px) {
+	.section-works1__top {
+		display: flex;
+		padding: 0 150px;
+		align-items: center;
 
 
-}
-.section-works1__title{
-	width: 50%;
-	margin: 0;
+	}
+
+	.section-works1__title {
+		width: 50%;
+		margin: 0;
 		display: block;
-	
+
 	}
-	.section-works1__image-body{
+
+	.section-works1__image-body {
 		width: 50%;
 		height: 100%;
 		border-left: 1px solid #212427;
 		margin: 0;
 	}
+
 	.section-works1__image {
 		width: 80%;
 		margin: 0 auto;
@@ -95,34 +100,182 @@ align-items: center;
 	text-align: left;
 	padding: 40px 24px 0 24px;
 	border-top: 2px dotted #030303;
-	margin: 0 auto 120px auto; 
+	margin: 0 auto 120px auto;
 	width: 50%;
 }
-.section-works1__poem p{
+
+.section-works1__poem p {
 	line-height: 2.4rem;
 }
 
-.section-works1____other-images-body {
-	height: 130px;
-	width:100%;
-	margin: 0 auto;
+/*画面サイズ1060以上での指定*/
+@media (min-width: 1060px) {
+	.section-works1__poem {
+		border: none;
+		-ms-writing-mode: tb-rl;
+		/* IE対応 */
+		writing-mode: vertical-rl;
+		text-orientation: upright;
+		/* すべて縦方向に表示　英数字も縦に表示するなら upright、和文も横に表示するなら sideways を指定 */
+		padding: 40px 0;
+	}
+
 }
 
-.section-works1__other-images-items {
+/*
+.img-01,.img-02,.img-03,.img-04 {
 	width: 130px;
 	height: 130px;
 	object-fit: cover;
     object-position: 0% 0%;	
 }
 
+*/
+.img-frame {
+	position: relative;
+	width: 100%;
+	height: 400px;
+	overflow: hidden;
+	margin: 80px auto;
+}
+
+.img-01,
+.img-02,
+.img-03 {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-size: cover;
+	background-repeat: no-repeat;
+
+	display: block;
+
+}
+
+.img-01 {
+	background-image: url('photo/01utuwa/02.JPG');
+	animation: slide-animation-01 24s infinite;
+}
+
+.img-02 {
+	background-image: url('photo/01utuwa/03.JPG');
+	animation: slide-animation-02 24s infinite;
+}
+
+.img-03 {
+	background-image: url('photo/01utuwa/04.JPG');
+	animation: slide-animation-03 24s infinite;
+}
+
+.img-04 {
+	background-image: url('photo/01utuwa/02.JPG');
+	animation: slide-animation-01 24s infinite;
+}
+
+.img-05 {
+	background-image: url('photo/01utuwa/03.JPG');
+	animation: slide-animation-02 24s infinite;
+}
+
+.img-06 {
+	background-image: url('photo/01utuwa/04.JPG');
+	animation: slide-animation-03 24s infinite;
+}
+	.img-07 {
+		background-image: url('photo/01utuwa/02.JPG');
+		animation: slide-animation-01 24s infinite;
+	}
+
+	.img-08 {
+		background-image: url('photo/01utuwa/03.JPG');
+		animation: slide-animation-02 24s infinite;
+	}
+
+
+
+@keyframes slide-animation-01 {
+	0% {
+		opacity: 1;
+		transform: scale(1.0);
+	}
+
+	30% {
+		opacity: 1;
+	}
+
+	40% {
+		opacity: 0;
+		transform: scale(1.15);
+	}
+
+	90% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1.0);
+	}
+}
+
+@keyframes slide-animation-02 {
+	0% {
+		opacity: 0;
+	}
+
+	30% {
+		opacity: 0;
+		transform: scale(1.1);
+	}
 
-  	/*画面サイズ1060以上での指定*/
-	  @media (min-width: 1060px) {
-		.section-works1__poem {
-			border: none;
-			-ms-writing-mode: tb-rl;  /* IE対応 */
-  writing-mode: vertical-rl;
-  text-orientation: upright; /* すべて縦方向に表示　英数字も縦に表示するなら upright、和文も横に表示するなら sideways を指定 */
-		}
+	40% {
+		opacity: 1;
+	}
+
+	60% {
+		opacity: 1;
+	}
+
+	70% {
+		opacity: 0;
+		transform: scale(1.0);
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes slide-animation-03 {
+	0% {
+		opacity: 0;
+	}
+
+	60% {
+		opacity: 0;
+		transform: scale(1.0);
+	}
+
+	70% {
+		opacity: 1;
+	}
+
+	90% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: scale(1.1);
+	}
+}
+@media (min-width: 1060px) {
+	.img-frame {
+		height:800px;
+		width: 100%;
+
+	}
 
-	  }
+}

works1.html

@@ -97,13 +97,22 @@ <h2>watering flowers,is it love or not?</h2>
       <p>覗き込んでみてください。</p><br>
 
     </section>
-    <section class="section-works1__other-images">
-      <div class="section-works1____other-images-body">
-        <img class="section-works1__other-images-items" src="photo/01utuwa/01.JPG" alt="top_image">
-        <img class="section-works1__other-images-items" src="photo/01utuwa/01.JPG" alt="top_image">
-        <img class="section-works1__other-images-items" src="photo/01utuwa/01.JPG" alt="top_image">
-        <img class="section-works1__other-images-items" src="photo/01utuwa/01.JPG" alt="top_image">
-      </div>
+
+
+
+
+
+    <section class="img-frame">
+
+        <div class="img-01"></div>
+        <div class="img-02"></div>
+        <div class="img-03"></div>
+        <div class="img-04"></div>
+        <div class="img-05"></div>
+        <div class="img-06"></div>
+        <div class="img-07"></div>
+        <div class="img-08"></div>
+
     </section>
   </main>
   <footer class="footer">