github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Hover%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;
}
TrueCodes 
Leave a comment