Skip to content
Advertisements

CSS Hover Effect

HTML CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="2.page.css">
</head>
<body>
   
    <div class="container">
        <div class="column active">
            <div class="content">
                <h1>1</h1>
                <div class="box">
                    <h2>What is lorem ipsum</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo sagittis diam a pulvinar. Pellentesque sit amet condimentum augue. Morbi rhoncus risus felis, at semper dolor iaculis ut. Pellentesque vitae ultrices libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada condimentum aliquet. Praesent iaculis, erat ac rutrum elementum, est arcu pretium diam, vitae viverra odio urna nec nisi.</p>
                </div>
            </div>
            <div class="bg bg1"></div>
        </div>

        <div class="column active">
            <div class="content">
                <h1>2</h1>
                <div class="box">
                    <h2>What is lorem ipsum</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo sagittis diam a pulvinar. Pellentesque sit amet condimentum augue. Morbi rhoncus risus felis, at semper dolor iaculis ut. Pellentesque vitae ultrices libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada condimentum aliquet. Praesent iaculis, erat ac rutrum elementum, est arcu pretium diam, vitae viverra odio urna nec nisi.</p>
                </div>
            </div>
            <div class="bg bg2"></div>
        </div>

        <div class="column active">
            <div class="content">
                <h1>3</h1>
                <div class="box">
                    <h2>What is lorem ipsum</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo sagittis diam a pulvinar. Pellentesque sit amet condimentum augue. Morbi rhoncus risus felis, at semper dolor iaculis ut. Pellentesque vitae ultrices libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada condimentum aliquet. Praesent iaculis, erat ac rutrum elementum, est arcu pretium diam, vitae viverra odio urna nec nisi.</p>
                </div>
            </div>
            <div class="bg bg3"></div>
        </div>

        <div class="column active">
            <div class="content">
                <h1>4</h1>
                <div class="box">
                    <h2>What is lorem ipsum</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo sagittis diam a pulvinar. Pellentesque sit amet condimentum augue. Morbi rhoncus risus felis, at semper dolor iaculis ut. Pellentesque vitae ultrices libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada condimentum aliquet. Praesent iaculis, erat ac rutrum elementum, est arcu pretium diam, vitae viverra odio urna nec nisi.</p>
                </div>
            </div>
            <div class="bg bg4"></div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(document).on("mouseover",".container .column",function(){
        $(this).addClass("active").siblings().removeClass("active")
    })
  </script>



</body>
</html>

CSS CODE:

body{
    margin: 0;
    padding:0;
    font-family: sans-serif;
/*  background: #000;*/
}
.container{
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.container .column{
    width: 25%;
    height: 100%;
    float: left;
    border-right: 2px solid rgba(0,0,0,.5);
    box-sizing: border-box;
    z-index: 1;
}
.container .column:last-child{
    border-right: none;
}
.container .column .content{
    position: relative;
    height: 100%;
}
.container .column .content h1{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    background: rgba(0,0,0,.1);
    text-align: center;
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,.2);
    font-size: 15em;
    border-top: 2px solid rgba(0,0,0,.5);
    border-bottom: 2px solid rgba(0,0,0,.5);

}
.container .column .content .box{
    position: absolute;
    top: 50%;
    transform: translateY(100%);
    box-sizing: border-box;
    padding: 40px;
    background: rgba(255,255,255,1);
    text-align: center;
    transition: .5s;
    opacity:0;
}
.container .column.active .content .box{
    opacity: 1;
    transform: translateY(-50%);
}
.container .column .content .box h2{
    margin: 0;
    padding: 0;
    font-size: 30px;
    color: #262626;
}
.container .column .content .box p{
    font-size:18px;
    color: #262626;
}
.container .column .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}
.container .column.active .bg.bg1{
    background: url(https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transition: .5s;
}
.container .column.active .bg.bg2{
    background: url(https://images.pexels.com/photos/7653/pexels-photo.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transition: .5s;
}
.container .column.active .bg.bg3{
    background: url(https://images.pexels.com/photos/1237119/pexels-photo-1237119.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transition: .5s;
}
.container .column.active .bg.bg4{
    background: url(https://images.pexels.com/photos/414144/pexels-photo-414144.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transition: .5s;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: