Image Expension Added

sahilatahar · sahilatahar · commit 099d9c28efff · 2023-04-27T07:53:32.000+05:30
diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@
 | 27  | [Typing Effect](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/typing-effect)                             | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/typing-effect/)               |
 | 28  | [Word Counter](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/word-counter)                             | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/word-counter/)               |
 | 29  | [Git Logo](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/git-logo)                             | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/git-logo/)               |
+| 30  | [Image Expansion](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-expansion)                             | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-expansion/)               |
 
 
 
diff --git a/image-expansion/index.html b/image-expansion/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Expansion</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <img src="https://cdn.pixabay.com/photo/2020/07/21/18/21/cornflower-5427048_960_720.jpg" alt="image 1"
+            class="image-1">
+        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/35/fusilier-tulip-7942127_960_720.jpg" alt="image 2">
+        <img src="https://cdn.pixabay.com/photo/2023/04/23/14/31/roses-7945822_960_720.jpg" alt="image 3">
+
+    </div>
+</body>
+
+</html>
diff --git a/image-expansion/style.css b/image-expansion/style.css
@@ -0,0 +1,81 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    display: grid;
+    place-items: center;
+}
+
+.container {
+    width: 500px;
+    height: 300px;
+    max-width: 90vw;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+}
+
+.container>img {
+    aspect-ratio: 1;
+    object-fit: cover;
+    border-radius: 15px;
+    transition: all 0.6s;
+}
+
+.container>img:hover {
+    width: 65%;
+}
+
+.container>img:not(:hover) {
+    width: 15%;
+    opacity: 0.7;
+}
+
+.container>img:first-of-type:not(:hover) {
+    width: 65%;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    background: #c8d6e5;
+}
+
+.container {
+    width: 500px;
+    height: 300px;
+    max-width: 90vw;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+}
+
+.container>img:hover {
+    width: 65%;
+}
+
+.container>img:not(:hover) {
+    width: 15%;
+    opacity: 0.7;
+}
+
+.container>img:first-of-type:not(:hover) {
+    width: 65%;
+    opacity: 1;
+}
+
+.container:hover>img:not(:hover) {
+    width: 15%;
+}
