console
<div class="container">
<div class="card">
<div class="imgBx">
<img src="https://img1.baidu.com/it/u=3318219233,1133748475&fm=253&fmt=auto&app=138&f=JPEG?w=320&h=320">
</div>
<div class="contentBx">
<div class="content">
<h3>Post One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="https://img0.baidu.com/it/u=2353414384,154284766&fm=253&fmt=auto&app=138&f=JPEG?w=320&h=320">
</div>
<div class="contentBx">
<div class="content">
<h3>Post Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="https://img0.baidu.com/it/u=3103156206,3679620120&fm=253&fmt=auto&app=138&f=JPEG?w=320&h=320">
</div>
<div class="contentBx">
<div class="content">
<h3>Post Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="https://img0.baidu.com/it/u=898396252,1560605938&fm=253&fmt=auto&app=138&f=JPEG?w=320&h=320">
</div>
<div class="contentBx">
<div class="content">
<h3>Post Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 1100px;
}
.container .card {
position: relative;
width: 320px;
height: 320px;
margin: 15px;
overflow: hidden;
}
.container .card .imgBx,
.container .card .contentBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container .card .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .card .contentBx::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transform: scaleX(0);
transition: transform 0.5s ease-in-out;
transform-origin: right;
transition-delay: 0.5s;
}
.container .card:hover .contentBx::before {
transform: scaleX(1);
transition: transform 0.5s ease-in-out;
transform-origin: left;
transition-delay: 0s;
}
.container .card .contentBx {
display: flex;
justify-content: center;
align-items: center;
}
.container .card .contentBx .content {
position: relative;
padding: 30px;
z-index: 1;
transition: 0.5s;
transform: translateX(-300px);
transition-delay: 0s;
}
.container .card:hover .contentBx .content {
transform: translateX(0px);
transition-delay: 0.5s;
}
.container .card .contentBx .content h3 {
font-size: 1.3em;
text-transform: uppercase;
letter-spacing: 1px;
}
.container .card .contentBx .content p {
font-size: 1em;
line-height: 1.4em;
font-weight: 300;
}