思路:用hover+transform
<div class="hover-box-outer">
<div class="hover-box">
<div class="before-hover">before</div>
<div class="after-hover">after</div>
</div>
</div>
//css
.hover-box-outer{
width: 200px;
height: 200px;
border: 1px solid dodgerblue;
overflow: hidden;
.hover-box {
position: relative;
height: 100%;
width: 200%;
display: flex;
border: 1px solid yellowgreen;
&:hover {
transform: translate(-50%, 0);
}
.before-hover {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.after-hover {
width: 50%;
height: 100%;
color: #4a90e2;
text-align: center;
text-decoration: underline;
background: #ffefd4;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
}
}