# CSS Animated images - hopefully useful / help to extend

**URL:** <https://community.glideapps.com/t/css-animated-images-hopefully-useful-help-to-extend/74328>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [June 23, 2024, 8:03am UTC](https://community.glideapps.com/t/css-animated-images-hopefully-useful-help-to-extend/74328 "2024-06-23T08:03:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [June 23, 2024, 8:03am UTC](https://community.glideapps.com/t/css-animated-images-hopefully-useful-help-to-extend/74328/1 "2024-06-23T08:03:27Z")

</div>

hi there

i adapted the following from codepen to provide animated images for my home page. it works rather well but with a few problems:

1. It works really well when it’s the only item on the page but gets smaller as i add stuff
2. I’d like to superimpose text over the image but cant - ideally one fixed text at the top [welcome to my site] kind of thing and one that rotates with animatation [we do x, we do y]
3. There is an annoying lone bullet point in the top left i cant remove

**HTML**

```auto
<ul class="slideshow">
	<li><span></span></li>
  <li><span>2</span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
</ul>

```

**CSS**

```auto
.slideshow {
  list-style-type: none;
}

/ **SLIDESHOW** /
.slideshow,
.slideshow:after { 
    top: -16px; /*Not sure why I needed this fix*/
		position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    z-index: 0; 
}

.slideshow li span { 
		position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 30s linear infinite 0s; 
}

.slideshow li:nth-child(1) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg"); 
}
.slideshow li:nth-child(2) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9ecd82b40364fc97f4b_bridge.jpg");
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");   
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
    animation-delay: 24s; 
}

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}

```

---

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [June 23, 2024, 9:54am UTC](https://community.glideapps.com/t/css-animated-images-hopefully-useful-help-to-extend/74328/2 "2024-06-23T09:54:33Z")

</div>

> [@fraser](#):
>
> There is an annoying lone bullet point in the top left i cant remove

```auto
.slideshow li {
  list-style-type: none; /* Remove list markers */

```