yiler-button-test-2 [Light]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<html>
<body onload="removeBootstrapStyle()">
   <script>
   
   function redirectPage(url) {
    window.location.href = url;
}

  function removeBootstrapStyle(){
    [...document.getElementsByClassName("button btn")].forEach(e => e.className = "button");
    [...document.getElementsByClassName("title page-header pb-3 mb-4 mt-5")].forEach(f => f.className = "title");
  }
</script>
    <style>
        .button {
            width: 400px;
            height: 400px;
            background-color: none;
            position: relative;
            overflow: hidden;
            margin: 3px;
        }

        .image {
            width: 100%;
            height: 100%;
        }

        .description{
            line-height: 1.2;
        }

        .overlay {
            width: 100%;
            height: 50%;
            background-color: black;
            position: absolute;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.45s;
            opacity: 0.8;
        }

        .overlay2 {
            width: 100%;
            height: 50%;
            top: 50%;
            background-color: black;
            position: absolute;
            transform-origin: right;
            transform: scaleX(0);
            transition: transform 0.45s;
            opacity: 0.8;
        }

        .button:hover {
            cursor: pointer;
        }

        .button:hover .overlay {
            transform: scaleX(1);
        }

        .button:hover .overlay2 {
            transform: scaleX(1);
        }

        .title {
            position: absolute;
            top:  1.7%;
            left: 10%;
            font-size: 40px;
            color: white;
            font-weight:650;
        }

        .description {
            position: absolute;
            top: 150%;
            left: 10%;
            font-size: 21px;
            color: white;
            transition: top 0.45s ease-in-out;
            overflow-wrap: normal;
            word-break: normal;
            max-width: 330px;
        }

        .button:hover .description {
            top: 25%
        }

        .button:hover .title {
            animation: glow 0.5s ease-in;
            animation-delay: 0.2s;
            animation-fill-mode: forwards;
        }

        .button {
            float: left;
            font-family: Arial, Helvetica, sans-serif;
        }

        @-webkit-keyframes glow {
            from {
                text-shadow: 0 0 0px rgb(170, 170, 170);
            }

            to {
                text-shadow: 0 0 20px rgb(170, 170, 170), 0 0 30px rgb(170, 170, 170), 0 0 40px rgb(170, 170, 170);
            }
        }
    </style>

    <div onclick="redirectPage('http://stackoverflow.com')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Light</h1>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-light.jpg">
    </div>
    <div onclick="redirectPage('http://stackoverflow.com')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Perception</h1>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-perception.jpg">
    </div>
    <div onclick="redirectPage('http://stackoverflow.com')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Reality</h1>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-reality.jpg">
    </div>
</body>

</html>