JSFiddle - React, Tailwind, and code Playground
HTML
<div id="slider">
<div>
<img src="http://immigrationlaw.nz/img/conveyancing_s_1.png" class="slide">
<img src="http://immigrationlaw.nz/img/expert_advice_1.png" class="slide">
<img src="http://immigrationlaw.nz/img/online_tracking_1.png" class="slide">
<img src="http://immigrationlaw.nz/img/free_initial_review_1.png" class="slide">
<img src="http://immigrationlaw.nz/img/no_hidden_fee_1.png" class="slide">
<a href="http://www.conveylaw.co.nz/conveyancing-fees/" target="_blank" class="slide">
<img src="http://immigrationlaw.nz/img/cta_1.png">
</a>
</div>
<img id="logo" src="http://immigrationlaw.nz/img/conveylaw_logo_1.png">
</div>
CSS
body {
background: #eee;
}
#logo {
margin: 0 auto;
display: block;
position: absolute;
bottom: 10px;
right: 20px;
}
#slider {
position: relative;
text-align: center;
background: #fff url("http://immigrationlaw.nz/img/bg.png") no-repeat;
width: 300px;
height: 250px;
margin: 0 auto;
}
#slider > div {
position: relative;
}
.slide {
display: block;
position: absolute;
opacity: 0;
top: 40px;
left: 30px;
}
.slide:nth-child(1) {
-webkit-animation: fade 24s 0s normal;
z-index: 60;
}
.slide:nth-child(2) {
-webkit-animation: fade 24s 4s normal;
z-index: 50;
}
.slide:nth-child(3) {
-webkit-animation: fade 24s 8s normal;
z-index: 40;
}
.slide:nth-child(4) {
-webkit-animation: fade 24s 12s normal;
z-index: 30;
}
.slide:nth-child(5) {
-webkit-animation: fade 24s 16s normal;
z-index: 20;
}
.slide:nth-child(6) {
-webkit-animation: cta 24s 20s normal;
-webkit-animation-fill-mode: forwards;
z-index: 70;
left: 0;
}
@-webkit-keyframes cta {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
15% {
opacity: 1;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}