/*nanti jangan lupa masukkan <div class="image-hover"></div> dalam html*/

.image-hover {
    width: 370px; /* Specify the width */
    height: 520px; /* Specify the height */
    background-image: url('images/front.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.image-hover:hover {
    background-image: url('images/front2.png'); /* Change on hover */
}

/* Logo */
.image-logo-hover {
    width: 100px; /* Specify the width */
    height: 40px; /* Specify the height */
    background-image: url('images/logo.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.image-logo-hover:hover {
    background-image: url('images/logo-2.png'); /* Change on hover */
}

/* Facebook */
.image-fb-hover {
    width: 25px; /* Specify the width */
    height: 25px; /* Specify the height */
    background-image: url('images/media/fb2.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.image-fb-hover:hover {
    background-image: url('images/media/fb.png'); /* Change on hover */
}

/* Instagram */
.image-ig-hover {
    width: 25px; /* Specify the width */
    height: 25px; /* Specify the height */
    background-image: url('images/media/ig2.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.image-ig-hover:hover {
    background-image: url('images/media/ig.png'); /* Change on hover */
}

/* Tik Tok */
.image-tt-hover {
    width: 25px; /* Specify the width */
    height: 25px; /* Specify the height */
    background-image: url('images/media/tt2.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.image-tt-hover:hover {
    background-image: url('images/media/tt.png'); /* Change on hover */
}

/* Youtube */
.image-yt-hover {
    width: 25px; /* Specify the width */
    height: 25px; /* Specify the height */
    background-image: url('images/media/yt2.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.image-yt-hover:hover {
    background-image: url('images/media/yt.png'); /* Change on hover */
}