صور دخله فى بعض
html
<div class="card">
<div class="card_part card_part-one">
</div>
<!-- Photo 2 -->
<div class="card_part card_part-two">
</div>
<!-- Photo 3 -->
<div class="card_part card_part-three">
</div>
<!-- Photo 4 -->
<div class="card_part card_part-four">
</div>
</div>
css
*,
*::before,
*::after { box-sizing: border-box; }
html,
body {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
margin: 0;
padding: 0;
background-color: #3c3c3c;
}
.card {
position: relative;
width:100%;
height: 200px;
overflow: hidden;
border-radius: 5px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
/*Light blue cover above the slide show*/
.card::after {
content: '';
position: absolute;
left: 0;
top: 0;
z-index: 900;
display: block;
width: 100%;
height: 100%;
background-color: rgba(140, 22, 115, 0.2);
}
.card_part {
position: absolute;
top: 0;
left: 0;
z-index: 7;
display: flex;
align-items: center;
width: 100%;
height: 100%;
transform: translateX( 700px );
background-image:url(../image/pexels-photo-326240.jpeg);
animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
animation-iteration-count: infinite;
}
.card_part.card_part-two {
z-index: 6;
background-image:url(../image/pexels-photo-952670.jpeg);
animation-delay: 7s;
}
.card_part.card_part-three {
z-index: 5;
background-image:url(../image/pexels-photo-1308624.jpeg);
animation-delay: 14s;
}
.card_part.card_part-four {
z-index: 4;
background-image:url(../image/pexels-photo-921776.jpeg);
animation-delay: 21s;
}
@keyframes opaqTransition {
3% { transform: translateX( 0 ); }
25% { transform: translateX( 0 ); }
28% { transform: translateX( -700px ); }
100% { transform: translateX( -700px ); }
}