HTML Project- Sideshow effect with HTML and CSS with source code

HTML Project- Sideshow effect with HTML and CSS with source code


To see the project in video-form, Go to end of the post...


Note:- Place all the file in a folder on desktop to load faster.
Download 9 small resolution pictures ( like- 259 * 194 ) and rename all the pictures with small alphabet a to i . and place them in same folder....
!!!Resolution of all the pictures must same!!!


HTML FILE

Copy the below code and paste on your html compiler
and save it with the name (
slide.html )
!!!Do not change the name otherwise the code will not run!!!


<!doctype html>
<html>
<head>
    <title>slideshow</title>
    <link rel="stylesheet" type="text/css" href="slide.css">
    </head>
    <body>
        <body style="background-color:#000;">
        <section class="slideshow">
        <div class="content">
            <div class="content-carrousel">
                <figure class="shadow"><img src="a.jfif"></figure>
                 <figure class="shadow"><img src="b.jfif"></figure>
                 <figure class="shadow"><img src="c.jfif"></figure>
                 <figure class="shadow"><img src="d.jfif"></figure>
                 <figure class="shadow"><img src="e.jfif"></figure>
                 <figure class="shadow"><img src="f.jfif"></figure>
                 <figure class="shadow"><img src="g.jfif"></figure>
                 <figure class="shadow"><img src="i.jfif"></figure>
                 <figure class="shadow"><img src="h.jfif"></figure>
            </div>
            </div>
        </section>
    </body>
</html>

CSS FILE

Copy the below code and paste on your html compiler
and save it with the name ( 
slide.css )
!!!Do not change the name otherwise the code will not run!!!


.slideshow
{
    margin: auto;
    background: #000;
    width: 100%;
    height: 100%; 
    padding-top: 15%;
    box-sizing: border-box;
    
}
.content
{
    margin: auto;
    width: 190px;
    perspective: 1000px;
    position: relative;
    padding-top: 5%;
    
}
.content-carrousel
{
    width: 100%;
    position: absolute;
    float: right;
    animation: rotar 15s infinite linear;
    transform-style: preserve-3d;
'
}
.content-carrousel:hover
{
    animation-play-state: paused;
    cursor: pointer;
    
}
.content-carrousel figure
{
    width: 100%;
    height: 120px;
    border: 1px solid #4d444d;
    overflow: hidden;
    position: absolute;
    
}
.conten-carrousel figure:nth-child(1)
{
    transform: rotateY(0deg) translateZ(300px);
    
}
.content-carrousel figure:nth-child(2)
{
    transform: rotateY(40deg) translateZ(300px);
}
.content-carrousel figure:nth-child(3)
{
    transform: rotateY(80deg) translateZ(300px);
}
.content-carrousel figure:nth-child(4)
{
    transform: rotateY(120deg) translateZ(300px);
}
.content-carrousel figure:nth-child(5)
{
    transform: rotateY(160deg) translateZ(300px);
}
.content-carrousel figure:nth-child(6)
{
    transform: rotateY(200deg) translateZ(300px);
}
.content-carrousel figure:nth-child(7)
{
    transform: rotateY(240deg) translateZ(300px);
}
.content-carrousel figure:nth-child(8)
{
    transform: rotateY(280deg) translateZ(300px);
}
.content-carrousel figure:nth-child(9)
{
    transform: rotateY(320deg) translateZ(300px);
}

.shadow
{
    position: absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius: 2px;
}
.content-carrousel img
{
    image-rendering: auto;
    transition: all 300ms;
    width: 100%;
    height: 100%;
.content-carrousel img:hover
{
    transform: scale(1.9);
    transition: all 300ms; 
}
@keyframes rotar
{
    from
    {
        transform: rotateY(0deg);
    }
    to
    {
        transform: rotateY(360deg);
    }
}


COMPLETED

if you are facing any problem from the above code then just comment below i will try to solve it.....
&
if you like this Project then Share it with your friends

Thanks for visiting....See you Again...

Post a Comment

0 Comments