I've been attempting to incorporate a zoom effect into a bootstrap carousel, but for some reason, I can't seem to get it to work :(
I suspect that I may need to insert the syntax into the core _carousel.scss file (or maybe not?). Despite my attempts to add it to both the regular CSS file and the _carousel.scss file, I haven't had any success.
Could any of my fellow programmers out there provide some assistance, please?
.carousel-item {
height: 100vh;
}
.carousel-image-1 {
background: url("../img/image1.jpg");
background-size: cover;
}
.carousel-image-2 {
background: url("../img/image2.jpg");
background-size: cover;
}
.carousel-image-3 {
background: url("../img/image3.jpg");
background-size: cover;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(1.5, 1.5);
}
}
@keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.5, 1.5);
}
}
.carousel-inner .carousel-item {
-webkit-animation: zoom 5s;
animation: zoom 5s;
}
<section id="showcase">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active"></div>
<div class="carousel-item carousel-image-2"></div>
<div class="carousel-item carousel-image-3"></div>
</div>
</div>