Script Editor

HTML: copy HTML

<div class="list">
    <ul>
        <li><a href="#"><img src="scripte/img/content/img_m_01.jpg" alt="Bild 01"><h3>Sommerabend</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_02.jpg" alt="Bild 02"><h3>Blauer Horizont</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_03.jpg" alt="Bild 03"><h3>Waldpfad</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_04.jpg" alt="Bild 04"><h3>Stille See</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_05.jpg" alt="Bild 05"><h3>Verlassene Straße</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_06.jpg" alt="Bild 06"><h3>Sonnenaufgang</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_07.jpg" alt="Bild 07"><h3>Roter Mohn</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_08.jpg" alt="Bild 08"><h3>Felsenküste</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_09.jpg" alt="Bild 09"><h3>Goldene Felder</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_10.jpg" alt="Bild 10"><h3>Dunkler Wald</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_11.jpg" alt="Bild 11"><h3>Verwunschene Gasse</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_12.jpg" alt="Bild 12"><h3>Lichter der Stadt</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_13.jpg" alt="Bild 13"><h3>Kalter Morgen</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_14.jpg" alt="Bild 14"><h3>Bergpanorama</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_15.jpg" alt="Bild 15"><h3>Wasserfall</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_16.jpg" alt="Bild 16"><h3>Leere Straße</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_17.jpg" alt="Bild 17"><h3>Küstenweg</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_18.jpg" alt="Bild 18"><h3>Nebel über Feldern</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_19.jpg" alt="Bild 19"><h3>Grüne Landschaft</h3></a></li>
        <li><a href="#"><img src="scripte/img/content/img_m_20.jpg" alt="Bild 20"><h3>Tiefer Canyon</h3></a></li>
    </ul>
</div>

CSS: copy CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #f4f4f4;
}

.list ul {
    list-style: none;
    padding: 2rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
}

.list li {
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.list li:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(141, 0, 0, 0.432);
}

.list a {
    display: block;
    text-decoration: none;
    color: #000000;
}

.list img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

.list li:hover img {
    filter: grayscale(0%);
}

.list h3 {
    margin: 0;
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
    color: #000000;
}

.list li:hover h3 {
    color: #a70000;
}

@keyframes glowBounce {
  0% {
    transform: scale(1) rotate(0deg);
    box-shadow: none;
  }
  50% {
    transform: scale(1.1) rotate(1deg);
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.6), 0 0 20px rgba(102, 255, 102, 0.3);
  }
  100% {
    transform: scale(1) rotate(0deg);
    box-shadow: none;
  }
}

@keyframes colorPulse {
  0%   { color: #000; }
  50%  { color: #00cc66; }
  100% { color: #000; }
}

@media (max-width: 1200px) {
    .list ul {
        padding: 2rem;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
        max-width: 1400px;
    }

.list img {
        height: 190px;
    }
}

JavaScript: copy JS