I’ve been working on a “slider” element. It’s mostly finished – but I’m still having some issues with animations.
It works as expected, but I am experiencing two issues:
- Upon clicking on an element, the title is displayed immediately. I’ve already tried adding delays to the “div” element, but it doesn’t seem to help. Am I missing anything?
- The image gets stretched on transition, and I’d like to avoid that. I’ve found solutions using clipping and transforms, but if I just reveal the image using transforms, the original “width” is still taken. By setting width to 0, I eliminate that problem.
.nav .nav-link {
position: relative;
padding: 0;
background: #1A5E3B;
color: #fff;
width: 40px;
height: 375px;
transition: all 2s;
}
.nav .nav-link div {
writing-mode: tb-rl;
transform: rotate(-180deg);
height: 100%;
padding: 10px;
text-align: center;
text-transform: uppercase;
font-size: 1rem;
font-weight: 600;
position: absolute;
top: 0;
}
.nav .nav-link img {
width: 0;
height: 375px;
transition: width 2s;
}
.nav .nav-link.active {
width: 250px;
color: #fff;
}
.nav .nav-link.active div {
writing-mode: initial;
transform: initial;
position: absolute;
top: initial;
bottom: 0;
left: 0;
width: 100%;
height: 20%;
display: block;
background: linear-gradient(to left bottom, #51874CB3 0%, #1A5E3BFF 100%);
display: flex;
justify-content: center;
align-items: center;
}
.nav .nav-link.active img {
width: 250px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav">
<a class="nav-link m-1 active" data-bs-toggle="tab" href="#tab1">
<img src="https://picsum.photos/250/375?q=111" class="img-fluid" alt="Gozdnogospodarsko načrtovanje">
<div>TEST 1</div>
</a>
<a class="nav-link m-1" data-bs-toggle="tab" href="#tab2">
<img src="https://picsum.photos/250/375?q=222" class="img-fluid" alt="Gojenje gozdov">
<div>TEST 2</div>
</a>
<a class="nav-link m-1" data-bs-toggle="tab" href="#tab3">
<img src="https://picsum.photos/250/375?q=333" class="img-fluid" alt="Varstvo gozdov">
<div>TEST 3</div>
</a>
<a class="nav-link m-1" data-bs-toggle="tab" href="#tab3">
<img src="https://picsum.photos/250/375?q=444" class="img-fluid" alt="Varstvo gozdov">
<div>TEST 4</div>
</a>
<a class="nav-link m-1" data-bs-toggle="tab" href="#tab3">
<img src="https://picsum.photos/250/375?q=555" class="img-fluid" alt="Varstvo gozdov">
<div>TEST 5</div>
</a>
<a class="nav-link m-1" data-bs-toggle="tab" href="#tab3">
<img src="https://picsum.photos/250/375?q=666" class="img-fluid" alt="Varstvo gozdov">
<div>TEST 6</div>
</a>
<a class="nav-link m-1" data-bs-toggle="tab" href="#tab3">
<img src="https://picsum.photos/250/375?q=777" class="img-fluid" alt="Varstvo gozdov">
<div>TEST 7</div>
</a>
</div>