xxxxxxxxxx
.slide-animation {
position: relative;
overflow: hidden;
height: 200px;
}
.slide-animation img {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slide-animation:hover img {
transform: translateY(-100%);
}
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 400px;
height: 200px;
overflow: hidden;
}
.slider img {
width: 100%;
height: auto;
display: none;
}
.slider img.active {
display: block;
}
@keyframes slide {
0% { left: 0; }
20% { left: -400px; }
40% { left: -800px; }
60% { left: -1200px; }
80% { left: -1600px; }
100% { left: 0; }
}
.slider img {
animation: slide 6s ease infinite;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</body>
</html>
xxxxxxxxxx
/* HTML */
<div class="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<!-- Add more slide elements as needed -->
</div>
/* CSS */
.slider {
width: 100%;
height: 400px; /* Adjust the height as per your requirements */
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
height: 400px; /* Adjust the height as per your requirements */
background-color: #000; /* Add your desired background color or image */
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: slideAnimation 5s linear infinite;
}
@keyframes slideAnimation {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
xxxxxxxxxx
You can use CSS3 transitions or maybe CSS3 animations to slide in an element.
For browser support: http://caniuse.com/
I made two quick examples just to show you how I mean.
CSS transition (on hover)
Demo One
Relevant Code
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
In this case, Im just transitioning the position from left: -100px; to 0; with a 1s. duration. It's also possible to move the element using transform: translate();