Skip to content
Advertisements

CSS Hover Effect

CSS Hover Effect

github: https://github.com/guldus98/HTML-CSS/tree/master/css%20hover%20effect


HTML CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="css_hover_effect.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>

    <div id="container">
        <div id="leftBox">
            <div id="date">
                <p id="day">12</p>
                <p id="month">JUN</p>
            </div>
            <div id="text">
                <h3>An Abstract Post Heading</h3>
                <p>Which is worse, that everyone has his price, or that the price is always so low.</p>
            </div>
        </div>
        <div id="midBox">
            <div id="date">
                <p id="day">16</p>
                <p id="month">JUN</p>
            </div>
            <div id="text">
                <h3>Down with this sort of thing</h3>
                <p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
            </div>
        </div>
        <div id="rightBox">
            <div id="date">
                <p id="day">20</p>
                <p id="month">JUN</p>
            </div>
            <div id="text">
                <h3>The World Ended Yesterday</h3>
                <p>The only skills I have the patience to learn are those that have no real application in life.</p>
            </div>
        </div>
    </div>


</body>
</html>

CSS CODE:

body {
    padding: 0;
    margin: 0;
    background: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Verdana;
}
#leftBox,
#midBox,
#rightBox{
    display:block;
    width:300px;
    height:400px;
    margin:10px;
    float:left;
    position:relative;
    padding:5px;
    overflow:hidden;
    box-shadow:0px 0px 35px 5px rgba(0, 0, 0, 0.72);
}
#date{
    display:block;
    position:absolute;
    right:30px;
    line-height:0px;
    text-align:center;
    padding:5px;
    margin-top:-5px;
    background:#fff;
    color:#262626;
    font-weight:bold;
    transition:.5s;
}
#day{
    margin-top:10px;
    font-size:20px;
}
#month{
    font-size:12px;
    margin-top:-2px;
}
#text{
    display:block;
    position:absolute;
    bottom:10px;
    width:85%;
    left:50%;
    transform:translateX(-50%);
}
#text h3{
    font-size:18px;
    color:#fff;
    text-shadow:0px 0px 20px #000;
}
#text p{
    font-size:14px;
    color:#fff;
    text-shadow:0px 0px 20px #000;
}
#leftBox::before,
#midBox::before,
#rightBox::before {
    content:"";
    background-size: cover;
    color: #fff;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(156, 76, 0, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    transition: .5s;
}
#leftBox:hover::before,
#midBox:hover::before,
#rightBox:hover::before{
    opacity:100;
    transition:.5s;
}
#leftBox:hover > #date,
#midBox:hover > #date,
#rightBox:hover > #date{
    transform:translateY(-50px);
    transition:.5s;
}
#leftBox:hover > #text h3,
#leftBox:hover > #text p, 
#midBox:hover > #text h3,
#midBox:hover > #text p, 
#rightBox:hover > #text h3,
#rightBox:hover > #text p{
    display: none;
}
#leftBox {
    background-image: url(https://images.unsplash.com/photo-1547586696-31bfb413bdf1?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
    background-position: center;
    background-size: cover;
}
#midBox {
    background-image: url(https://images.unsplash.com/photo-1547596876-524cee55d611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80);
    background-position: center;
    background-size: cover;
}
#rightBox {
    background-image: url(https://images.unsplash.com/photo-1547586717-7ac67acce008?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
    background-position: center;
    background-size: cover;
}
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: