ads_header

Accoridon Image Hover JavaScript




Preview




Hello guys, this tutorial is about creating an accordion card that has 4 parts, and switching when the pointer is highlighted (hover). You can make this tutorial as a reference for the project you are working on or your college assignment on campus.





Now, create a project folder and add the index.html and style.css files in it and add 4 images in landscape mode as background. When finished, open index.html and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Typing</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function (){
            $('.cardNavbar ul li:nth-child(1)').on('mouseover',function(){
                $('.cardContainer .cardSingle').removeClass('active');
                $('.cardContainer .cardSingle:nth-child(1)').addClass('active');
            })

            $('.cardNavbar ul li:nth-child(2)').on('mouseover',function(){
                $('.cardContainer .cardSingle').removeClass('active');
                $('.cardContainer .cardSingle:nth-child(2)').addClass('active');
            })

            $('.cardNavbar ul li:nth-child(3)').on('mouseover',function(){
                $('.cardContainer .cardSingle').removeClass('active');
                $('.cardContainer .cardSingle:nth-child(3)').addClass('active');
            })

            $('.cardNavbar ul li:nth-child(4)').on('mouseover',function(){
                $('.cardContainer .cardSingle').removeClass('active');
                $('.cardContainer .cardSingle:nth-child(4)').addClass('active');
            })
        })
    </script>
</head>

<body>
    <div class="cardSlider">
        <div class="cardContainer">
            <div class="cardSingle">
                <article>
                    <h1>Card 1</h1>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                        when an unknown printer took a galley of type and scrambled it to make a type 
                        specimen book.
                    </p>
                </article>
            </div>

            <div class="cardSingle">
                <article>
                    <h1>Card 2</h1>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                        when an unknown printer took a galley of type and scrambled it to make a type 
                        specimen book.
                    </p>
                </article>
            </div>

            <div class="cardSingle">
                <article>
                    <h1>Card 3</h1>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                        when an unknown printer took a galley of type and scrambled it to make a type 
                        specimen book.
                    </p>
                </article>
            </div>

            <div class="cardSingle">
                <article>
                    <h1>Card 4</h1>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                        when an unknown printer took a galley of type and scrambled it to make a type 
                        specimen book.
                    </p>
                </article>
            </div>
        </div>
        <div class="cardNavbar">
            <ul>
                <li>Card One</li>
                <li>Card Two</li>
                <li>Card Three</li>
                <li>Card Four</li>
            </ul>
        </div>
    </div>
</body>
</html>

Now, open style.css and enter the following code

body{
    margin: 0;
    padding: 0;
    background: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.cardSlider{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1000px;
    height: 400px;
    background: white;
    overflow: hidden;
}

.cardContainer{
    width: 100%;
    height: 350px;
    overflow: hidden;
    background: dodgerblue;
}

.cardNavbar{
    position: relative;
    width: 100%;
    height: 50px;
    background: dodgerblue;
}

.cardNavbar ul{
    margin: 0;
    padding: 0;
    background: white;
    display: flex;
    height: 100%;
}

.cardNavbar ul li{
    list-style: none;
    width: 25%;
    text-align: center;
    line-height: 50px;
    border-right: 1px solid #262626;
    text-transform: uppercase;
}

.cardNavbar ul li:last-child{
    border-right: none;
}

.cardContainer .cardSingle{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 350px;
    box-sizing: border-box;
    padding: 50px;
    background: dodgerblue;
    background-position: center !important;
}

article{
    background: rgba(255,255,255,.5);
    padding: 20px;
}

.cardContainer .cardSingle:nth-child(1){
    background: url(img1.jpg);
    background-size: cover;
}

.cardContainer .cardSingle:nth-child(2){
    background: url(img2.jpeg);
    background-size: cover;
}

.cardContainer .cardSingle:nth-child(3){
    background: url(img3.jpeg);
    background-size: cover;
}

.cardContainer .cardSingle:nth-child(4){
    background: url(img4.jpeg);
    background-size: cover;
}

.active{
    z-index: 1;
}

Save all files and run index.html

No comments:

Powered by Blogger.