Twitch Alert Delay - html

Question

I'm trying to add a delay to some text I have displayed. An image appears and then I want the text to appear after X time.
Here is my current code which displays both the image and text at the same time. I'm not familiar much with how to make this work, so any help would be great. I'm just doing this to help make my stream look better!
Thanks guys
#notification {
font-family: 'Roboto';
font-size: 24px;
}
.image-container {
width: 100%;
height: 100%;
}
#notification .image {
object-fit: contain;
width: 100%;
height: 100%;
}
.subtitle {
font-size: 24px;
color: #FFFFFF;
}
.video {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.title {
color: #FFFFFF;
}
.text-container {
position: absolute;
top: 50%;
left: 60%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
text-shadow: 0px 0px 1px #000000, 0px 0px 2px #000000, 0px 0px 3px #000000, 0px 0px 4px #000000, 0px 0px 5px #000000;
}
.tts {
display: none;
}
.keyword:not(.user_message) {
color: #FF9F9F;
}
<div class="notification-container">
<div class="image-container">
<!--
Adding an <img> tag to this section with class="image" will give it the
default styling of this alert layout. You may either hardcode the image
URL, or use the variable "{image}" to have the URL of any image you
have uploaded on the Media tab automatically inserted.
For example:
<img class="image" src="https://mbt-user-upload.s3.amazonaws.com/uncodinatx/muxy-character.svg" />
Or
<img class="image" src="{image}" />
If you have uploaded a webm video instead, use the "{video}" variable inside a <video> tag to have its URL automatically inserted.
For example:
<video class="video" autoplay loop muted="true">
<source src="{video}" type="video/webm">
</video>
-->
<img class="image" src="{image}" />
</div>
<div class="text-container">
<div class="title">
<span class='keyword name'>{name}</span> has just subscribed!
</div>
<div class="subtitle">
<span class='keyword user_message'>{user_message}</span>
</div>
</div>
<div class="tts">
<!--
Any text placed inside this div will be spoken using your selected
Text-To-Speech voice when the alert is shown. Note that by default
Text-To-Speech is disabled, so you will have to enable it on the Media
tab.
-->
{tts_user_message}
</div>
<!--
Adding any audio tag to your markup will play it automatically when
the alert is shown. Note that you should not add the 'autoplay' attribute
so that we can control exactly when the audio file plays. If you have
specified an audio alert in the Media tab (either one provided by us, or
a custom sound you have uploaded) you can have the source URL of that file
inserted automatically by using the '{audio}' variable.
For example:
<audio src='https://u.muxy.dev/assets/sounds/alert-sounds/Bloom.mp3'></audio>
Or
<audio src='{audio}'></audio>
-->
</div>

Answer 1

copy and run this.
in css you use the "display:none" property then in Jquery , you are going to display it when the page has finished loading.
The text will appear 2 secs (2000ms) after the image. You can play with the timing to suit your need
<style type="text/css">
/*edited*/
#text{
display: none;
color: red;
}
/*edited end*/
#image{
width: 300px;
display: none;
}
</style>
<!-- image -->
<div >
<img id ="image" src="https://tinyjpg.com/images/social/website.jpg" />
</div>
<!-- text -->
<p id="text">Hello user</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if($("#image").is(":hidden")){
$("#image").show(100,function(){
$("#text").delay(2000).show(100);
});
}
});
</script>