Flip box with Slide up content Demo with Sample Code

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>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <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.

Drop your queries

Table of Contents

Have A Project In Mind? Let's Get To Work