Although I understand how absolute positioning works, it is currently disrupting the layout in this particular case. Using min-height with media queries for various screen sizes seems like a viable solution, but it's not foolproof considering that the client can upload images of any size.
The issue lies in the fact that content from below is overlapping with the tab that utilizes absolute positioning. Absolute positioning is necessary for the animation to function properly. Is there a way to incorporate a jQuery code to automatically detect the image height and apply it accordingly, or is there a more effective solution to tackle this problem?
JSFiddle: https://jsfiddle.net/6yo5b198/
HTML:
<div class="modules">
<div class="container">
<div class="row">
<div class="col-md-12 col-12">
<div id="exTab1">
<div class="row">
<div class="col-md-3 col-12">
<ul class="nav nav-pills">
<li class="active">
<a class="nav-link active" href="#a1a" data-toggle="tab">Overview</a>
</li>
<li><a class="nav-link " href="#a2a" data-toggle="tab">About Us</a>
</li>
<li><a class="nav-link " href="#a3a" data-toggle="tab">Services</a>
</li>
</ul>
</div>
<div class="col-md-9 col-12">
<div class="tab-content clearfix">
<div class="tab-pane active" id="a1a">
<img src="https://i.postimg.cc/xjFVtP8v/1511048-810098669070876-8091817687576561426-n.jpg">
</div>
<div class="tab-pane" id="a2a">
<img src="https://i.postimg.cc/d3XM3JpH/198582c8c440a3a96817d79a6dc28731-640x469.jpg">
</div>
<div class="tab-pane" id="a3a">
<img src="https://i.postimg.cc/qMhVYC69/50445941-10213980102716788-1077889899119509504-n.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="">
<h1>Other web contents go here.</h1>
</div>
CSS:
.tab-content .tab-pane img {
opacity: 0;
-moz-transform: translateX(50px);
-ms-transform: translateX(50px);
-o-transform: translateX(50px);
-webkit-transform: translateX(50px);
transform: translateX(50px);
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
max-width: 100%;
height: auto;
}
.tab-content .active img {
opacity: 1;
transform: translate(0);
}
#exTab1 .tab-content {
overflow: hidden;
}
#exTab1 .tab-content .tab-pane {
display: block;
position: absolute;
overflow: hidden;
}