giwuf,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.yellow,
.green {
width: 100%;
height: 50px;
}
.yellow {
background-color: yellow;
margin-bottom: -20px;
}
.green {
margin-top: -20px;
background-color: green;
}
.carousel .owl-stage-outer {
padding: 20px 0;
}
.owl-item{
transition: .5s all;
}
.owl-item:hover {
transform: scale(1.2);
z-index: 10;
}
.photo img {
width: auto;
}
@media (min-width: 0px){
.photo img{
height: 100px;
}}
@media (min-width: 480px){
.photo img{
height: 120px;
}}
@media (min-width: 768px){
.photo img{
height: 150px;
}}
@media (min-width: 992px){
.photo img{
height: 170px;
}}
@media (min-width: 1200px){
.photo img{
height: 190px;
}}
</style>
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<script>
jQuery(window).on("load", function() {
$("#photo-gallery").owlCarousel({
loop: true,
nav: false,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
768: {
items: 4
},
992: {
items: 5
}
}
})
});
</script>
</head>
<body>
<div class="yellow"></div>
<section id="photo-gallery" class="carousel owl-carousel">
<div>
<a class="photo"><img src="https://picsum.photos/300/190/?random&r=1" alt="photo-1"></a>
</div>
<div>
<a class="photo"><img src="https://picsum.photos/304/184/?random&r=2" alt="photo-2"></a>
</div>
<div>
<a class="photo"><img src="https://picsum.photos/305/189/?random&r=3" alt="photo-3"></a>
</div>
<div>
<a class="photo"><img src="https://picsum.photos/304/189/?random&r=4" alt="photo-4"></a>
</div>
<div>
<a class="photo"><img src="https://picsum.photos/305/190/?random&r=5" alt="photo-5"></a>
</div>
</section>
<div class="green"></div>
</body>
</html>