Responsive carousel with hover effects - owl carousel
How do I make an responsive carousel with hover effects - owl carousel?
Responsive carousel slider with owl carousel, hover effects and touch support made with owl carousel. What is a responsive carousel with hover effects - owl carousel? How do you make a responsive carousel with hover effects - owl carousel? This script and codes were developed by Mario Loncarek on 03 July 2022, Sunday.
Responsive carousel with hover effects - owl carousel Previews
Responsive carousel with hover effects - owl carousel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive carousel with hover effects - owl carousel</title> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <div class="customNavigation"> <a class="btn gray prev"><i class="icon ion-ios-arrow-left"></i></a> <a class="btn gray next"><i class="icon ion-ios-arrow-right"></i></a> </div> <div id="slider-carousel" class="owl-carousel"> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> <i class="icon ion-search"></i> </div> <div class="figure"> <i class="icon ion-link"></i> </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>Lorem ipsum</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> <i class="icon ion-search"></i> </div> <div class="figure"> <i class="icon ion-link"></i> </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>Lorem ipsum</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> <i class="icon ion-search"></i> </div> <div class="figure"> <i class="icon ion-link"></i> </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>Lorem ipsum</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> <i class="icon ion-search"></i> </div> <div class="figure"> <i class="icon ion-link"></i> </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>Lorem ipsum</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> <i class="icon ion-search"></i> </div> <div class="figure"> <i class="icon ion-link"></i> </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>Lorem ipsum</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> <i class="icon ion-search"></i> </div> <div class="figure"> <i class="icon ion-link"></i> </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>Lorem ipsum</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsive carousel with hover effects - owl carousel - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background: #ccc;
}
/* * Core Owl Carousel CSS File * v1.3.3 */
/* clearfix */
.owl-carousel .owl-wrapper:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; line-height: 0;
}
/* display none until init */
.owl-carousel { position: relative; display: none; width: 100%; -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper { position: relative; display: none; -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer { position: relative; overflow: hidden; width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item { float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div { cursor: pointer;
}
.owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing { cursor: url(../images/grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.owl-theme .owl-controls { margin-top: 10px; text-align: center;
}
/* * Owl Carousel CSS3 Transitions * v1.3.2 */
.owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -moz-perspective: 1200px; -moz-perspective-origin-x: 50%; -moz-perspective-origin-y: 50%; perspective: 1200px;
}
/* fade */
.owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease;
}
.owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease;
}
.owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both;
}
.owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both;
}
.owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both;
}
/* Keyframes */
/*empty*/
@-webkit-keyframes empty { 0% { opacity: 1 }
}
@-moz-keyframes empty { 0% { opacity: 1 }
}
@keyframes empty { 0% { opacity: 1 }
}
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }
}
@-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }
}
@-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px); } 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px); } 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -moz-transform: translateZ(-500px); } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
}
@keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleToFade { to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes goDown { from { -moz-transform: translateY(-100%); }
}
@keyframes goDown { from { transform: translateY(-100%); }
}
@-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); }
}
@-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); }
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div { display: inline-block; margin: 5px; padding: 3px 10px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #869791; color: #FFF; font-size: 12px; opacity: 0.5; filter: Alpha(Opacity=50); /*IE7 fix*/ zoom: 1; *display: inline; /*IE7 life-saver */
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover { text-decoration: none; opacity: 1; filter: Alpha(Opacity=100); /*IE7 fix*/
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page { display: inline-block; zoom: 1; *display: inline; /*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span { display: block; margin: 5px 7px; width: 12px; height: 12px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; opacity: 0.5; filter: Alpha(Opacity=50); /*IE7 fix*/
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span { opacity: 1; filter: Alpha(Opacity=100); /*IE7 fix*/
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers { padding: 2px 10px; width: auto; height: auto; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; color: #FFF; font-size: 12px;
}
/* preloading images */
.owl-item.loading { min-height: 150px; background: url(../images/AjaxLoader.gif) no-repeat center center
}
/* CUSTOM USER OPTIONS */
.carousel-container { width: 100%;
}
.item { margin: 0 10px; background: #fff; color: #333;
}
.item img { width: 100%;
}
.item h4 { margin-top: 10px; color: #333; padding: 10px; font-family: 'Montserrat', sans-serif;
}
.item p { color: #333; padding: 0 10px 30px; font-family: 'PT Serif', serif;
}
.customNavigation { margin-top: 5px; margin-right: 11px; text-align: right;
}
.customNavigation .btn { position: relative; display: inline-block; overflow: visible; margin: -1.9px; padding: 0.8em 1.1em; border: 0; box-shadow: none; color: #fff; text-transform: uppercase; text-shadow: none; font-size: 20px; cursor: crosshair; -webkit-transition: all .1s ease-in 0s; -moz-transition: all .1s ease-in 0s; -o-transition: all .1s ease-in 0s; transition-property: all .1s ease-in 0s; -webkit-font-smoothing: antialiased; background: #333;
}
.customNavigation .btn:hover { background: #222;
}
.hoverfx { position: relative; display: block; overflow: hidden; text-align: center;
}
.hoverfx img { position: absolute; left: 0; width: 100%;
}
.hoverfx:before { display: inline-block; padding-top: 60%; content: ''; vertical-align: middle;
}
.hoverfx .figure { position: relative; z-index: 2; display: inline-block; padding: 10px 15px; max-width: 60%; border: 3px solid #e9e9e9; color: #ecf0f1; vertical-align: middle; text-transform: uppercase; font-size: 1.2rem; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition-property: all .3s ease;
}
.hoverfx .figure:hover { background: #e9e9e9; color: #333;
}
.hoverfx .overlay { position: absolute; top: 0; z-index: 1; padding: 50%; background: rgba(0, 0, 0, .7); opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition-property: all .3s ease;
}
.item:hover .figure,
.item:hover .overlay { opacity: 1;
}Responsive carousel with hover effects - owl carousel - Script Codes JS Codes
$(document).ready(function() { var owl = $("#slider-carousel"); owl.owlCarousel({ items: 4, itemsDesktop: [1000, 4], itemsDesktopSmall: [900, 2], itemsTablet: [600, 1], itemsMobile: false, pagination: false }); $(".next").click(function() { owl.trigger('owl.next'); }) $(".prev").click(function() { owl.trigger('owl.prev'); }) });
| Developer | Mario Loncarek |
| Username | riogrande |
| Uploaded | July 03, 2022 |
| Rating | 3.5 |
| Size | 4,334 Kb |
| Views | 1,177,968 |
Do you need developer help for Responsive carousel with hover effects - owl carousel?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mario Loncarek (riogrande) Script Codes
| Name | Size |
| Responsive overlay menu - full menu example | 3,452 Kb |
| Responsive full width carousel with owl-carousel | 4,226 Kb |
| Css3 only dropdown menu | 2,563 Kb |
| IOs 7 phone screen | 2,567 Kb |
| Responsive overlay menu framework | 3,006 Kb |
| Responsive overlay menu - full menu with second menu example | 3,613 Kb |
| Responsive navigation mobile menu toggle | 2,148 Kb |
| Responsive overlay menu - grid example | 3,289 Kb |
| Buttons with icons made easy - with font awesome | 2,097 Kb |
| Responsive overlay menu - anchor links example | 3,289 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by John Malc | F789gh | 1,420 Kb |
| Nested table email layout | Massimo-cassandro | 2,355 Kb |
| The Monty Hall Problem | Melatonind | 4,360 Kb |
| Sidebar Thing | Jonambas | 2,779 Kb |
| Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
| Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
| CSS Variables | Jdsteinbach | 4,759 Kb |
| Christ the Redeemer | Prashantsani | 2,208 Kb |
| Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
| A Pen by Kevin | Kevinkenger | 2,642 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!