Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to my images, which means the dimensions of the "back" image need to adjust dynamically to align with the "front".
This is the approach I envision (although I understand that the CSS code provided is not feasible, it serves to demonstrate my objective). I am utilizing ng-animate for transitioning effects and revealing the initially hidden "back" while concealing the front (which I have successfully achieved).
html:
<img class="front img-responsive" src="path/to/img.jpg" alt="">
<div class="back">Information about the image</div>
css:
.back {
height: [current height of .front]
width: [current width of .front]
}