JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
	<div class="container-fluid">
		<div class="col-md-12 col-xs-12 col-sm-12 service_img">
			 <img src="https://s9.postimg.org/w3pkeix2n/Services.jpg">
				<div class="small-images">	
					 <ul class="owl-carousel">
					 	<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 1"></li>
					 	<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 2"></li>
					 	<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 3"></li>

					 </ul>
				</div>
		</div>
	</div><br><br>

CSS

.service_img{
			width:100%;
			height:500px;
			display: block;
		}
		.service_img .small-images ul li{
			display: inline-block;
		    /* position:absolute; 
		     top: 33%;*/
		}

		.small-images{
			top: 25%;
			left:90px;
			opacity: 0.9;
		    position: absolute;
		}

	    .small-images ul li{
          padding-right: 80px;
		}

	 .image-text:hover{

	  }