Style 1
<section id="dt-content" class="sec-pt-lg buttons">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Style 1</h2>
<div class="row">
<div class="col-12">
<div class="owl-carousel top-courses owl-loaded owl-drag">
<div class="item course-item">
<img src="themes/custom/education_pro/assets/theme/img/carousels/slider.png" alt="Course 1">
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
<div class="item course-item">
<img src="themes/custom/education_pro/assets/theme/img/carousels/slider-2.png" alt="Course 1">
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
<div class="item course-item">
<img src="themes/custom/education_pro/assets/theme/img/carousels/slider-3.png" alt="Course 1">
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
<div class="item course-item">
<img src="themes/custom/education_pro/assets/theme/img/carousels/slider-4.png" alt="Course 1">
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
<div class="item course-item">
<img src="themes/custom/education_pro/assets/theme/img/carousels/slider.png" alt="Course 1">
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
<div class="item course-item">
<a href="course-details.php" title="Course 1"><img src="themes/custom/education_pro/assets/theme/img/carousels/slider-2.png" alt="Course 1"></a>
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
<div class="item course-item">
<img src="themes/custom/education_pro/assets/theme/img/carousels/slider-3.png" alt="Course 1">
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
<div class="item course-item">
<img src="themes/custom/education_pro/assets/theme/img/carousels/slider-4.png" alt="Course 1">
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
<div class="item course-item">
<img src="themes/custom/education_pro/assets/theme/img/carousels/slider.png" alt="Course 1">
<div class="overlay">
<div class="course-content">
<div class="course-title">
<h3><a href="javascript:void(0)" title="Course 1">Course Title</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Style 2
<section id="dt-content" class="sec-pt-lg buttons">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Style 1</h2>
<div class="row">
<div class="col-12 sec-pt-bc">
<div class="owl-carousel owl-theme departments owl-loaded owl-drag">
<div class="item department-item">
<div class="card card-department">
<div class="card-image">
<a href="javascript:void(0)" class="image" title="Department Title"><img src="themes/custom/education_pro/assets/theme/img/carousels/sliders-1.png" class="img-fluid" alt="Department Image"></a>
<a href="javascript:void(0)" title="Department Title" class="overlay">
<h3>Department Title</h3>
<h4>Total Courses<span>121</span></h4>
</a>
</div>
</div>
</div>
<div class="item department-item">
<div class="card card-department">
<div class="card-image">
<a href="javascript:void(0)" class="image" title="Department Title"><img src="themes/custom/education_pro/assets/theme/img/carousels/sliders-2.png" class="img-fluid" alt="Department Image"></a>
<a href="javascript:void(0)" title="Department Title" class="overlay">
<h3>Department Title</h3>
<h4>Total Courses<span>53</span></h4>
</a>
</div>
</div>
</div>
<div class="item department-item">
<div class="card card-department">
<div class="card-image">
<a href="javascript:void(0)" class="image" title="Department Title"><img src="themes/custom/education_pro/assets/theme/img/carousels/sliders-1.png" class="img-fluid" alt="Department Image"></a>
<a href="javascript:void(0)" title="Department Title" class="overlay">
<h3>Department Title</h3>
<h4>Total Courses<span>342</span></h4>
</a>
</div>
</div>
</div>
<div class="item department-item">
<div class="card card-department">
<div class="card-image">
<a href="javascript:void(0)" class="image" title="Department Title"><img src="themes/custom/education_pro/assets/theme/img/carousels/sliders-2.png" class="img-fluid" alt="Department Image"></a>
<a href="javascript:void(0)" title="Department Title" class="overlay">
<h3>Department Title</h3>
<h4>Total Courses<span>342</span></h4>
</a>
</div>
</div>
</div>
<div class="item department-item">
<div class="card card-department">
<div class="card-image">
<a href="javascript:void(0)" class="image" title="Department Title"><img src="themes/custom/education_pro/assets/theme/img/carousels/sliders-1.png" class="img-fluid" alt="Department Image"></a>
<a href="javascript:void(0)" title="Department Title" class="overlay">
<h3>Department Title</h3>
<h4>Total Courses<span>121</span></h4>
</a>
</div>
</div>
</div>
<div class="item department-item">
<div class="card card-department">
<div class="card-image">
<a href="javascript:void(0)" class="image" title="Department Title"><img src="themes/custom/education_pro/assets/theme/img/carousels/sliders-2.png" class="img-fluid" alt="Department Image"></a>
<a href="javascript:void(0)" title="Department Title" class="overlay">
<h3>Department Title</h3>
<h4>Total Courses<span>53</span></h4>
</a>
</div>
</div>
</div>
<div class="item department-item">
<div class="card card-department">
<div class="card-image">
<a href="javascript:void(0)" class="image" title="Department Title"><img src="themes/custom/education_pro/assets/theme/img/carousels/sliders-1.png" class="img-fluid" alt="Department Image"></a>
<a href="javascript:void(0)" title="Department Title" class="overlay">
<h3>Department Title</h3>
<h4>Total Courses<span>342</span></h4>
</a>
</div>
</div>
</div>
<div class="item department-item">
<div class="card card-department">
<div class="card-image">
<a href="javascript:void(0)" class="image" title="Department Title"><img src="themes/custom/education_pro/assets/theme/img/carousels/sliders-2.png" class="img-fluid" alt="Department Image"></a>
<a href="javascript:void(0)" title="Department Title" class="overlay">
<h3>Department Title</h3>
<h4>Total Courses<span>342</span></h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>