Slideshow within text keeps going out of text.

[Wolfus]

Hello, I recently started doing HTML and I tried making a slideshow withint a text. After like 5 seconds the picture overlaps the text and ruins it here is a gif. https://gyazo.com/920c1d2e2cd5c26eb703f0a97caa96fb and here is my code https://gyazo.com/e4d57596363d3d62b7016c4226f5eb48

[Beverleyh]

Please create a simple demo in CodePen so that we can see a real/working example of the behaviour/problem.

[Wolfus]

    <title>School</title>

body{
margin: 0;
padding: 0;
background: #2d3436;
}
h1{
font-size: 200px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0px;
background: url(images/Trevianum1.jpg) 50% 50%;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
animation: slide 30s infinite;
}
@keyframes slide{
25%{
background: url(images/Trevianum1.jpg);
}
50%{
background: url(images/Trevianum2.jpg);
}
75%{
background: url(images/Trevianum3.jpg);
}
100%{
background: url(images/Trevianum4.jpg);
}
}

Trevianum

like this?

[Beverleyh]

No, we would need a live/working demo in https://codepen.io

[Author]

Posts