image-gallery

index.html

@@ -119,7 +119,10 @@
         </p>
       </section>
       <section class="photo">
-        <!--Jsem přidám galerii-->
+        <img class="picture" src="img/home.png" alt="Homescreen" />
+	<img class="picture1" src="img/config.png" alt="config.vim">
+	<img class="picture2" src="img/fzf.png" alt="fzf">
+
       </section>
       <section id="install">
         <h2>Instalace a nastavení:</h2>

script.js

@@ -75,3 +75,48 @@ document.getElementById("toggleButton").addEventListener("click", toggleMode);
 // Nastavit výchozí styl na Dracula mód po načtení stránky
 setDraculaStyles();
 isDraculaMode = true;
+
+
+
+// Photo Gallery -> section
+const image1 = document.querySelector(".picture")
+
+image1.addEventListener("mouseenter", () => {
+
+    image1.style.transform = "scale(2.2)"
+
+})
+
+image1.addEventListener("mouseleave", () => {
+
+    image1.style.transform = "scale(1)"
+
+})
+
+const image2 = document.querySelector(".picture1")
+
+image2.addEventListener("mouseenter", () => {
+
+    image2.style.transform = "scale(2.2)"
+
+})
+
+image2.addEventListener("mouseleave", () => {
+
+    image2.style.transform = "scale(1)"
+
+})
+
+const image3 = document.querySelector(".picture2")
+
+image3.addEventListener("mouseenter", () => {
+
+    image3.style.transform = "scale(2.2)"
+
+})
+
+image3.addEventListener("mouseleave", () => {
+
+    image3.style.transform = "scale(1)"
+
+})

style.css

@@ -139,9 +139,24 @@ padding: 10px;
  
 .sat {
 	width: 175px;
-	height: 175px;}
+	height: 175px;
+}
 
 
+.photo {
+	text-align: center;
+}
+.photo img {
+
+    width: 300px;
+
+    height: 200px;
+
+    margin: 10px;
+
+    transition: all 0.5s linear;
+
+}
 /*footer pevná pozice*/
 
 footer {