Here's my css code and HTML. Whenever a line in my carousel-caption becomes too long it falls off the image. When I minimize the window, however, the caption eventually moves into the image creating the effect I really want. Wondering how I can contain it to the image? Thanks for the help - because I am relatively new to CSS/BOOTSTRAP styling.
* {
margin: 0;
padding: 0;
}
a {
background-color: transparent !important;
color: white;
}
img {
max-width: 100%;
max-height: 80vh;
margin: auto;
}
.carousel-caption {
padding: 30px;
background-color:transparent !important;
position: absolute;
}
.picsum-img-wrapper {
padding-bottom: 20px;
padding-top: 20px;
background-color: #8E9AAF ;
color: white;
font-size: 20px;
font-family: orpheuspro, serif;
font-style: normal;
font-weight: 600 !important;
display: grid;
height: 100%;
}
h3 {
background-color: transparent !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ngb-carousel [showNavigationArrows]="true"
[showNavigationIndicators]="true"
interval="12000"
[keyboard]="true"
[pauseOnHover]="true"
[wrap]="true"
[activeId]="'secondSlide'"
[interval]="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="../../assets/img/actual.png" alt="Angular Carousel 1">
<div class="carousel-caption">
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. To read on click <a routerLink="/blog/1">here</a></p>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="../../assets/img/image0.jpeg" alt="Angular Carousel 2">
<div class="carousel-caption">
<h3>Title Goes Here</h3>
<p>Consectetur tortor volutpat pretium... To read on click <a routerLink="/blog/2">here</a></p>
</div>
</div>
</ng-template>
</ngb-carousel>