Event Overview August 2024

by Kofod

HTML

<div class="background-container">
        <div class="background-image"></div>
        <div class="animation-image first-image"></div>
        
        <img class="animation-image map-image" src="https://i.imgur.com/DuLFmPY.png" usemap="#image-map">

        <map name="image-map">
            <area target="_blank" alt="Raf" title="Raf" href="https://en.virtualpopstar.com/social/forum?category=11&amp;topic=362569" coords="221,169,123" shape="circle">
            <area target="_blank" alt="WWIB" title="WWIB" href="https://en.virtualpopstar.com/social/forum?category=11&topic=362715" coords="708,247,164" shape="circle">
            <area target="_blank" alt="Stress" title="Stress" href="https://en.virtualpopstar.com/social/forum?category=23&topic=362625" coords="437,526,76" shape="circle">
        </map>
        
    </div>

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.background-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.background-image {
    background-image: url('https://i.imgur.com/J6kDhxT.png');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.animation-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s;
    z-index: 2;
}

.first-image {
    background-image: url('https://i.imgur.com/DNGaXWp.png');
    opacity: 1; /* Show the first image initially */
}

.map-image {
    z-index: 3; /* Ensure the map image is on top */
    opacity: 0; /* Initially hidden */
}

JavaScript

$(document).ready(function() {
    setTimeout(function() {
        $('.first-image').css('opacity', '0');
        $('.map-image, .text-box').css('opacity', '1');
    }, 2000); // Adjust the delay as needed (2000ms = 2 seconds)
});