I found a helpful answer on Stack Overflow that I'm currently following, and it's working perfectly for me.
However, I am facing an issue where I need to position the boxes in different parts of the document, causing the animation to break. You can view the JSFiddle link here, which illustrates the current incorrect behavior of the code.
Below is the code snippet:
If what I intend to achieve is not clear, please let me know so I can provide more details.
HTML
<div class="wrapper">
<div class="background-out box-1"></div>
<div class="background-over box-1"></div>
<div class="background-info">
<div class="text">Text 1</div>
</div>
</div>
<div class="wrapper">
<div class="background-out box-2"></div>
<div class="background-over box-2"></div>
<div class="background-info">
<div class="text">Text 2</div>
</div>
</div>
CSS
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 0 0 20px;
}
.background-out,
.background-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.background-info {
position: absolute;
left: 100px;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: grey;
}
.background-info .text {
padding: 5px;
}
.background-over {
background-color: green;
visibility: hidden;
opacity: 0;
transform-origin: 100% 50% 0px;
transform: rotateY(-90deg);
}
.wrapper:hover .background-out {
visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
transform: translate3d(0px,0px,0px) rotateY(0deg);
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
-moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
-webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
visibility: visible;
opacity: 1;
}
.box-1 {
background-color: pink;
left:200%;
top:100%;
}
.box-2 {
background-color: orange;
left:500%;
top:100%;
}