I am facing a strange issue with the bootstrap card and title text overlay on the images on the Front Card.
I applied the flip, and the title has some background color and works fine. But when it flips the background color and the title text appears on the back card for some mili-seconds as shown in the below image:
<code>.flipbox {
perspective: 1000px;
position: relative;
transform-style: preserve-3d;
z-index: 1;
margin-bottom: 40px;
width: 100%;
}
.flipbox_inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
transform-style: preserve-3d;
transition: transform 0.7s ease;
/*0.7s*/
}
.flipbox_font,
.flipbox_back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateX(0);
-webkit-transform: rotateX(0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 0.7s ease, -webkit-transform 0.7s ease;
/*0.7s*/
}
.flipbox_font {
background: #fff;
transform: rotateY(0deg);
}
.flipbox:hover .flipbox_font {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flipbox_back {
background: #343a40;
text-align: center;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipbox:hover .flipbox_back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flipbox .flipbox_back h3 {
color: #fff;
font-weight: 700;
font-size: 1.25rem;
}
.centered-text-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 1)/* White background with 30% opacity */
}
@media (min-width: 768px) {
.padyatri_team .col-md-3 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media only screen and (max-width: 575px) and (min-width: 479px) {
.padyatri_team .col-6 {
-ms-flex: 0 0 33.33%;
flex: 0 0 33.33%;
max-width: 33.33%;
}
}</code>
<code>.flipbox {
perspective: 1000px;
position: relative;
transform-style: preserve-3d;
z-index: 1;
margin-bottom: 40px;
width: 100%;
}
.flipbox_inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
transform-style: preserve-3d;
transition: transform 0.7s ease;
/*0.7s*/
}
.flipbox_font,
.flipbox_back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateX(0);
-webkit-transform: rotateX(0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 0.7s ease, -webkit-transform 0.7s ease;
/*0.7s*/
}
.flipbox_font {
background: #fff;
transform: rotateY(0deg);
}
.flipbox:hover .flipbox_font {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flipbox_back {
background: #343a40;
text-align: center;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipbox:hover .flipbox_back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flipbox .flipbox_back h3 {
color: #fff;
font-weight: 700;
font-size: 1.25rem;
}
.centered-text-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 1)/* White background with 30% opacity */
}
@media (min-width: 768px) {
.padyatri_team .col-md-3 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media only screen and (max-width: 575px) and (min-width: 479px) {
.padyatri_team .col-6 {
-ms-flex: 0 0 33.33%;
flex: 0 0 33.33%;
max-width: 33.33%;
}
}</code>
.flipbox {
perspective: 1000px;
position: relative;
transform-style: preserve-3d;
z-index: 1;
margin-bottom: 40px;
width: 100%;
}
.flipbox_inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
transform-style: preserve-3d;
transition: transform 0.7s ease;
/*0.7s*/
}
.flipbox_font,
.flipbox_back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateX(0);
-webkit-transform: rotateX(0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 0.7s ease, -webkit-transform 0.7s ease;
/*0.7s*/
}
.flipbox_font {
background: #fff;
transform: rotateY(0deg);
}
.flipbox:hover .flipbox_font {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flipbox_back {
background: #343a40;
text-align: center;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipbox:hover .flipbox_back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flipbox .flipbox_back h3 {
color: #fff;
font-weight: 700;
font-size: 1.25rem;
}
.centered-text-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 1)/* White background with 30% opacity */
}
@media (min-width: 768px) {
.padyatri_team .col-md-3 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media only screen and (max-width: 575px) and (min-width: 479px) {
.padyatri_team .col-6 {
-ms-flex: 0 0 33.33%;
flex: 0 0 33.33%;
max-width: 33.33%;
}
}<code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<section class="team py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="flipbox">
<div class="flipbox_inner">
<div class="flipbox_font">
<img src="https://placehold.co/300x300" class="img-fluid" alt="Sample Image">
<div class="centered-text-div">
<h5>some Text</h5>
</div>
</div>
<div class="flipbox_back">
<h3>Text on the Back</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="flipbox">
<div class="flipbox_inner">
<div class="flipbox_font">
<img src="https://placehold.co/300x300" class="img-fluid" alt="Sample Image">
<div class="centered-text-div">
<h5>some Text</h5>
</div>
</div>
<div class="flipbox_back">
<h3>Text on the Back</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script></code>
<code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<section class="team py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="flipbox">
<div class="flipbox_inner">
<div class="flipbox_font">
<img src="https://placehold.co/300x300" class="img-fluid" alt="Sample Image">
<div class="centered-text-div">
<h5>some Text</h5>
</div>
</div>
<div class="flipbox_back">
<h3>Text on the Back</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="flipbox">
<div class="flipbox_inner">
<div class="flipbox_font">
<img src="https://placehold.co/300x300" class="img-fluid" alt="Sample Image">
<div class="centered-text-div">
<h5>some Text</h5>
</div>
</div>
<div class="flipbox_back">
<h3>Text on the Back</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script></code>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<section class="team py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="flipbox">
<div class="flipbox_inner">
<div class="flipbox_font">
<img src="https://placehold.co/300x300" class="img-fluid" alt="Sample Image">
<div class="centered-text-div">
<h5>some Text</h5>
</div>
</div>
<div class="flipbox_back">
<h3>Text on the Back</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="flipbox">
<div class="flipbox_inner">
<div class="flipbox_font">
<img src="https://placehold.co/300x300" class="img-fluid" alt="Sample Image">
<div class="centered-text-div">
<h5>some Text</h5>
</div>
</div>
<div class="flipbox_back">
<h3>Text on the Back</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>3