Loading Screen Not Loading Hover Effects

Zaphiro · 2023-08-09T00:10:43.022Z

Hello,
I am a server owner and also a developer for my own server. I was coding a loading screen and everything works fine, except the css hover effects. In the browser it works fine, but in FiveM it does not load the elements. It is specifically not loading the “.line-below” child of .member. The code is below.

.team-back{
        position: relative;
        z-index: 2;
    left: 1000px;
    font-family: PoppinsRegular;
    font-size: 10pt;
}
.member-name{
    color: white;
}
.member-role{
    color: lightblue; 
}
 .team{
    width: auto;
    display: flex;
 }

 .team .member:hover{
    transition: 0.5s;
    transform: translateY(20px);
    .line-below{
        width: 180px;
        transition: 0.5s
    }
 }
 .member{
    transition: 0.5s;
    width: 180px;
    position: relative;
    background: #00000070;
    border-radius: 10px;
    padding-inline: 20px;
    margin-right: 10px;
 }

 .line-below{
    transition: 0.5s;
    background: lightblue;
    height: 2px;
    width: 20px;
 }

shortybsd · 2023-08-09T04:27:56.374Z

Zaphiro:

transition: 0.5s

You forgot the semicolon ending on transition: 0.5s; therefor broken CSS.

Zaphiro · 2023-08-09T14:57:57.603Z

Even after fixing that line, it still does not load the effect in FiveM. It loads in chrome tho. The effect of that code is when I hover over the “.member” div it makes the “.line-below” stretch out, but it does not. Is like FiveM does not listen to the child element inside of another child.

shortybsd · 2023-08-09T22:08:35.669Z

I would need to see your html code and CSS currently to better help you.

Zaphiro · 2023-08-09T23:13:35.242Z

HTML

<!-- ██╗███╗   ███╗██████╗ ██████╗     ██╗      ██████╗  █████╗ ██████╗ ██╗███╗   ██╗ ██████╗ 
     ██║████╗ ████║██╔══██╗██╔══██╗    ██║     ██╔═══██╗██╔══██╗██╔══██╗██║████╗  ██║██╔════╝ 
     ██║██╔████╔██║██████╔╝██████╔╝    ██║     ██║   ██║███████║██║  ██║██║██╔██╗ ██║██║  ███╗
██   ██║██║╚██╔╝██║██╔══██╗██╔═══╝     ██║     ██║   ██║██╔══██║██║  ██║██║██║╚██╗██║██║   ██║
╚█████╔╝██║ ╚═╝ ██║██║  ██║██║         ███████╗╚██████╔╝██║  ██║██████╔╝██║██║ ╚████║╚██████╔╝
 ╚════╝ ╚═╝     ╚═╝╚═╝  ╚═╝╚═╝         ╚══════╝ ╚═════╝ ╚═╝  ╚═╝╚═════╝ ╚═╝╚═╝  ╚═══╝ ╚═════╝ 
                                                                                                -->
                                                                                                


                                                                                              <!-- comment this out -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JMRP Loading Screen</title>
    <link href="assets/css/style.css" rel="stylesheet">
    <script src="assets/js/script.js" defer></script>
</head>

<body>

    <video autoplay muted loop class="background-video">
      <source src="assets/video/background.webm" type="video/webm">
    </video>
    <div class="background-blacksource"></div>

    <video autoplay loop src="assets/video/dusteffect.mp4" type="video/mp4" class="noise-effect"></video>

    <img class="background-image" src="assets/images/background.png" alt="This is the background image">

    <audio autoplay loop src="assets/sound/music.mp3"></audio>
    
    <div class="team-back">
      <div class="team">
         <div class="member">
          <h3 class="member-name">fabiio19 | Fabs</h3>
          <p class="member-role">!CEO, Director of civilians, Head Developer</p>
          <div class="line-below"></div>
         </div>
         <div class="member">
          <h3 class="member-name">fabiio19 | Tex. P</h3>
          <p class="member-role">!2102, Co-Owner, Director of LEO</p>
          <div class="line-below"></div>
         </div>
         <div class="member">
          <h3 class="member-name">fabiio19 | Fabs</h3>
          <p class="member-role">!CEO, Director of civilians, Head Developer</p>
          <div class="line-below"></div>
         </div>
      </div>
    </div>

    <div class="square">
      <div class="left-side-square"></div>
          <p class="paragraph-side">JM Roleplay Is A Custom Lore Based vMenu Server With Over 200 Custom Vehicles.</p>
          <h1 class="jmrp-title">JMRP</h1>
          <h3 class="jmrp-version">v1.3Bruce</h3>
          <h2>Tips: <span></span></h2>

          <div class="changelog-background">
            <div class="chagelog-date">08/13/23</div>
            <div class="changelog-text">v1.3Bruce</div>
            <p class="paragraph-text">This version includes new cars, bug fixes. We added scully emote.</p>
          </div>
          <div class="changelog-background">
            <div class="chagelog-date">08/13/23</div>
            <div class="changelog-text">v1.3Bruce</div>
            <p class="paragraph-text">This version includes new cars, bug fixes. We added scully emote.</p>
          </div>
          <br>
    </div>
  
  <div class="inital-square">test</div>
  <img class="jmrp-logo" src="assets/images/logo.png" alt="JMRP Logo">


</body>

</html>

CSS

/* 
███████╗ ██████╗ ███╗   ██╗████████╗███████╗
██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝
█████╗  ██║   ██║██╔██╗ ██║   ██║   ███████╗
██╔══╝  ██║   ██║██║╚██╗██║   ██║   ╚════██║
██║     ╚██████╔╝██║ ╚████║   ██║   ███████║
╚═╝      ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝
*/


@font-face {
    font-family: JMRP_LOGO_TEXT;
    src: url(../fonts/republica_minor.otf);
}
@font-face {
    font-family: PoppinsRegular;
    src: url(../fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: PoppinsThin;
    src: url(../fonts/Poppins-Thin.ttf);
}

@font-face {
    font-family: Heydex;
    src: url(../fonts/Heydex.ttf);
}

 /* 
 ██████╗ ██████╗ ███╗   ██╗████████╗ █████╗ ██╗███╗   ██╗███████╗██████╗ 
██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔══██╗██║████╗  ██║██╔════╝██╔══██╗
██║     ██║   ██║██╔██╗ ██║   ██║   ███████║██║██╔██╗ ██║█████╗  ██████╔╝
██║     ██║   ██║██║╚██╗██║   ██║   ██╔══██║██║██║╚██╗██║██╔══╝  ██╔══██╗
╚██████╗╚██████╔╝██║ ╚████║   ██║   ██║  ██║██║██║ ╚████║███████╗██║  ██║
 ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝*/

::-webkit-scrollbar{
    display: none;
}
body{
    overflow: hidden;
    width: 0;
    height: 0;
}

*{
    margin: 0;
    padding: 0;
}
/* ------------ */

@media (min-aspect-ratio: 16/9){
    body{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    body{
        width: auto;
        height: 100%;
    }
}


.square{
    position: relative;
    padding-top: 190px;
    height: 700px;
    width: 600px;
    left: -890px;
    transform: scale(1.2);
    transition: 1s;
    z-index: 1;
}


.square.active{
    transition: 2s;
    position: relative;
    height: 700px;
    width: 600px;
    top: 0px;
    left: -690px;
    transform: scale(1.2);
    transition: 1s;
}


.left-side-square{
    position: absolute;
    background: black;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 700px;
    width: 650px;
    opacity: .5;
}

.paragraph-side{
    position: absolute;
    margin-top: 57%;
    margin-left: 48%;
    justify-content:end;
    font-family: 'PoppinsRegular';
    opacity: .6;
    width: 700px;
    text-align: center;
    transform: rotate(-90deg);
    color: white;
}

.square:hover{
    left: 40px;
    .paragraph-side{
        transition: 1s;
        opacity: 0;
    }
}

.square:not(:hover){
    .paragraph-side{
        transition: 1s;
        opacity: .6;
    }
}

.jmrp-title {
    position: relative;
    top: 30px;
    font-family: 'JMRP_LOGO_TEXT', cursive;
    font-size: 100pt;
    color: #add8e680;
    text-align: right;
}

.jmrp-version{
    position: relative;
    top: -30px;
    font-family: 'PoppinsThin';
    font-size: 30pt;
    color: white;
    text-align: right;
}

.background-video{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

@media (min-aspect-ratio: 16/9){
    .background-video{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    .background-video{
        width: auto;
        height: 100%;
    }
}

.noise-effect{
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: .4;
    z-index: -1;
}

@media (min-aspect-ratio: 16/9){
    .noise-effect{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    .noise-effect{
        width: auto;
        height: 100%;
    }
}

.background-image{
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: .4;
}


.changelog-background{
    position: relative;
    margin-left: 140px;
    width: 450px;
    height: 100px;
    margin-bottom: 20px;
    background: #ffffff40;
    border-radius: 10px;
    overflow-x: hidden;
}

.changelog-text{
    position: relative;
    color: white;
    font-family: 'PoppinsRegular';
    font-weight: 200;
    text-align: center;
    top: -20px;
}

.paragraph-text{
    position: relative;
    font-family: 'PoppinsThin';
    font-size: 9pt;
    text-align: center;
    margin-top: -15px;
    color: white;
}

.chagelog-date{
    position: relative;
    color: #ffffff10;
    font-family: 'PoppinsThin';
    text-align: center;
    left: 240px;
    top: 40px;
    height: 20px;
    transform: rotate(90deg);
}

.changelog-background:hover{
    transform: translateY(-10%);
    transition: 0.5s;
    .chagelog-date{
        font-family: 'PoppinsRegular';
        animation: fadeIn 0.5s;
        color: lightblue;
        font-weight: 900;
    }
    background: white;
    overflow:visible;
    .changelog-text{
        color: black;
    }
    .paragraph-text{
        color: black;
        font-size: 900;
        font-family: PoppinsRegular;
        font-weight: 900;
    }
}

.changelog-background:not(:hover){
    transform: translateY(0%);
    transition: 1s;
}

h2 {
    position: relative;
    font-family: 'Heydex';
    opacity: .7;
    font-size: 19pt;
    color: lightblue;
    bottom: 190px;
    left: 80px;
}

h2 span::before{
    content: "";
    right: -7px;
    top: 50%;
    position: absolute;
    height: 30px;
    width: 2px;
    background: white;
    transform: translateY(-45%);
}

h2 span{
    position: relative;
    color: white;
}


/* 
██████╗ ██╗ ██████╗ ██╗  ██╗████████╗    ███████╗██╗██████╗ ███████╗
██╔══██╗██║██╔════╝ ██║  ██║╚══██╔══╝    ██╔════╝██║██╔══██╗██╔════╝
██████╔╝██║██║  ███╗███████║   ██║       ███████╗██║██║  ██║█████╗  
██╔══██╗██║██║   ██║██╔══██║   ██║       ╚════██║██║██║  ██║██╔══╝  
██║  ██║██║╚██████╔╝██║  ██║   ██║       ███████║██║██████╔╝███████╗
╚═╝  ╚═╝╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝       ╚══════╝╚═╝╚═════╝ ╚══════╝
 */

.team-back{
    position: absolute;
    z-index: 2;
    left: 890px;
    font-family: 'PoppinsRegular';
    font-size: 10pt;
    padding-top: 980px;
}
.member-name{
    color: white;
}
.member-role{
    color: lightblue; 
}
 .team{
    width: auto;
    display: flex;
 }

 .team::before{
    content: "Our Team |";
    height: 35px;
    width: 110px;
    text-align: center;
    font-family: 'PoppinsRegular';
    font-weight: 500;
    color: lightblue;
    font-size: 16px;
    position: relative;
    margin-right: 20px;
    margin-top: 20px;
    padding-top: 5px;
    margin-bottom: 10px;
    background: #00000070;
    border-radius: 10px;
 }

 .team::after{
    content: "| Our Team";
    height: 35px;
    width: 110px;
    text-align: center;
    font-family: PoppinsRegular;
    font-weight: 500;
    color: lightblue;
    font-size: 16px;
    position: relative;
    margin-right: 20px;
    margin-top: 20px;
    padding-top: 5px;
    margin-bottom: 10px;
    background: #00000070;
    border-radius: 10px;
 }


 .team .member:hover{
    transition: 0.5s;
    transform: translateY(-20px);
    .line-below{
        width: 180px;
        transition: 0.5s;
    }
 }
 .member{
    transition: 0.5s;
    width: 180px;
    position: relative;
    background: #00000070;
    border-radius: 10px;
    padding-inline: 20px;
    margin-right: 10px;
 }

 .line-below{
    transition: 0.5s;
    background: lightblue;
    height: 2px;
    width: 20px;
 }

/*----------*/

.jmrp-logo{
    position: absolute;
    top: 520px;
    right: 80px;
    opacity: 0;
    transition: 3s;
 }

 .jmrp-logo.active{
    top: 40px;
    opacity: .4;
 }

 /* 
██╗███╗   ██╗██╗████████╗██╗ █████╗ ██╗         ███████╗ ██████╗ ██╗   ██╗ █████╗ ██████╗ ███████╗
██║████╗  ██║██║╚══██╔══╝██║██╔══██╗██║         ██╔════╝██╔═══██╗██║   ██║██╔══██╗██╔══██╗██╔════╝
██║██╔██╗ ██║██║   ██║   ██║███████║██║         ███████╗██║   ██║██║   ██║███████║██████╔╝█████╗  
██║██║╚██╗██║██║   ██║   ██║██╔══██║██║         ╚════██║██║▄▄ ██║██║   ██║██╔══██║██╔══██╗██╔══╝  
██║██║ ╚████║██║   ██║   ██║██║  ██║███████╗    ███████║╚██████╔╝╚██████╔╝██║  ██║██║  ██║███████╗
╚═╝╚═╝  ╚═══╝╚═╝   ╚═╝   ╚═╝╚═╝  ╚═╝╚══════╝    ╚══════╝ ╚══▀▀═╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝ */

.inital-square{
    position: absolute;
    left: -20px;
    top: -100px;
    width: 1940px;
    height: 1180px;
    background: black;
    transition: 2s;
    opacity: 1;
}

.inital-square.active{
    position: absolute;
    left: -20px;
    top: -100px;
    width: 1940px;
    height: 0px;
    background: black;
    transition: 2s;
    opacity: 1;
}


 /* 
 █████╗ ███╗   ██╗██╗███╗   ███╗ █████╗ ████████╗██╗ ██████╗ ███╗   ██╗███████╗
██╔══██╗████╗  ██║██║████╗ ████║██╔══██╗╚══██╔══╝██║██╔═══██╗████╗  ██║██╔════╝
███████║██╔██╗ ██║██║██╔████╔██║███████║   ██║   ██║██║   ██║██╔██╗ ██║███████╗
██╔══██║██║╚██╗██║██║██║╚██╔╝██║██╔══██║   ██║   ██║██║   ██║██║╚██╗██║╚════██║
██║  ██║██║ ╚████║██║██║ ╚═╝ ██║██║  ██║   ██║   ██║╚██████╔╝██║ ╚████║███████║
╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝╚══════╝
                                                                                */

@keyframes fadeIn {
    0%{ color: #ffffff10};
    100%{color: #ffffff90};
}

@keyframes fadeInBackground {
    0%{opacity: .3};
    100%{opacity: 1};
}

shortybsd · 2023-08-10T03:04:56.351Z

Man, I see at least 30+ issues in your CSS and this will not load in a regular browser. Might I suggest using a CSS validator and it should pinpoint all the issues in the CSS. Fix CSS and you should be good.
Also, you cannot put a child selector within other child. They need to be separate. There is a bunch of places in the selectors where you added semicolons when not needed in which broke the code.

Zaphiro · 2023-08-10T05:54:05.558Z

I have tried putting the child selectors separate but it still does not load in FiveM. It does load on my browser tho. And there is also an extra JS code that I did not include.