I've been attempting to implement a responsive flip card animation using the resources at , but I'm encountering an issue. The back side of the card is set to 100% width, and when I try to adjust it to 33.333%, the layout gets disrupted.
If anyone could provide some assistance, it would be greatly appreciated!
$(function(){
$("#card").flip({
trigger: 'hover'
});
});.albumbox img {
height: 450px;
object-fit: cover;
}
.albumbox {
height: 450px;
}
#card {
margin: 0 auto;
height: 450px;
width: auto;
}
#card .back {
background: #2184cd;
color: #fff;
text-align: center;
}<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.20/dist/jquery.flip.min.js"></script>
<main>
<div class="row">
<h2>Singles <i class="material-icons">album</i></h2>
<div id="card">
<div class="albumbox col-4 front">
<img src="http://theblueliar.com/wp-content/uploads/2015/07/Jessie-J-012.jpg">
</div>
<div class="albumbox4_detail back">
detail back
</div>
</div>
<div class="albumbox albumbox5 col-4">
<img src="http://theblueliar.com/wp-content/uploads/2015/07/Jessie-J-012.jpg">
</div>
<div class="albumbox albumbox6 col-4">
<img src="http://theblueliar.com/wp-content/uploads/2015/07/Jessie-J-012.jpg">
</div>
</div>
</main>