<div class="box">
<span class="box__blurb">I'm a Box</span>
<span class="rect__blurb">I'm a Rectangle</span>
</div>
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.box {
display: flex;
justify-content: space-between;
align-items: center;
width: 150px;
height: 150px;
background-color: red;
color: white;
box-shadow: 5px 5px 25px #000;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
transition:
all 1s;
.box__blurb {
opacity: 1;
transform: translateX(45px);
transition:
opacity 0.5s 2s,
transform 0.5s 0.5s;
}
.rect__blurb {
opacity: 0;
transform: translateX(500px);
transition:
opacity 0.5s 1s,
transform 0.5s 1s;
}
&:hover {
width: 300px;
background-color: orange;
box-shadow: -5px 5px 25px #000;
.box__blurb {
opacity: 0;
transform: translateX(-500px);
}
.rect__blurb {
opacity: 1;
transform: translateX(-100px);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.