CSS for Flip box with Slide up
.services-box {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 370px;
border: 1px solid #ffffff;
border-radius: 0px;
perspective: 1000px;
overflow:hidden;
}
.extraspace {
padding: 5px 0;
display: block;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
}
.flip-box:hover .flip-box-back {
top: 0;
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
align-items: center;
flex-direction: column;
}
.flip-box-front {
background-color: #003048;
color: #ffffff;
border-radius: 0px;
padding: 25px;
justify-content: center;
}
.flip-box-front img {
height: 50px;
width: 50px;
}
.flip-box-back {
top:100%;
background-color: #ffffff;
color: #000;
border-radius: 0px;
padding: 20px;
transition: .3s ease;
}
HTML for Flip box with Slide up
<div class="services-box">
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img decoding="async" src="https://i.picsum.photos/id/549/200/300.jpg?hmac=9F77mTpxkm1ETBsp5xdMXg7jZAAAF2jnFT9MXqMltSk" style="width:100px">
<h3 class="titile-owl">
Sample Title Front
</h3>
</div>
<div class="flip-box-back owl-info">
<h3>Sample Title Back</h3>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5179647416675830"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5179647416675830"
data-ad-slot="6188276115"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5179647416675830"
crossorigin="anonymous"></script>
<!-- 21 tcs Home Post -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5179647416675830"
data-ad-slot="7485045914"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<button>Read More</button>
</div>
</div>
</div>
</div>
Example for Flip box with Slide up content
Sample Title Front
Sample Title Back
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
