amitabhaghosh197
6/18/2014 - 12:51 PM
Slide-a-div-to-right-from-left-on-mouseenter.markdown
body{background: #d15a1f;}
.container
{margin: 0 auto;
min-width: 940px;
}
h2{font-family: Open Sans;
color: #fff;
font-weight: 300;
}
.item-wrapper
{
margin: 0 auto;
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.owl-caption
{
width: 100.1%;
height: 100.1% !important;
background: url(http://damiracle.net/demoimgs/slideeffect/carousel-hover.png) repeat 0 0;
margin: 0;
padding: 0;
position: absolute;
top: 0 !important;
display: none;
}
.owl-caption p
{
font-family: Open Sans !important;
text-align: center;
color: #fff;
}
.owl-caption p:first-child
{
font-size: 14px;
font-weight: bold;
line-height: 20px;
padding-top: 25%;
text-transform:uppercase;
}
.owl-caption p:last-child
{
font-size: 11px;
font-weight: 500;
}
.owl-caption p a
{
color: #111111 !important;
text-decoration: none !important;
background: #ffffff;
background-image: -webkit-linear-gradient(top, #ffffff, #d6d6d6);
background-image: -moz-linear-gradient(top, #ffffff, #d6d6d6);
background-image: -ms-linear-gradient(top, #ffffff, #d6d6d6);
background-image: -o-linear-gradient(top, #ffffff, #d6d6d6);
background-image: linear-gradient(to bottom, #ffffff, #d6d6d6);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 2px #1c1c1c;
-moz-box-shadow: 0px 1px 2px #1c1c1c;
box-shadow: 0px 1px 2px #1c1c1c;
color: #141414;
font-size: 11px;
padding: 8px;
text-decoration: none;
}
var $j = jQuery.noConflict();
$j(document) .ready(function(){
jQuery('.img-items') .hover(
function(){
var effect = "slide";
var duration = 300;
var options ={direction : "left"};
jQuery(this) .children('.owl-caption') .show( effect, duration, options);
},
function(){
var effect = "slide";
var duration = 300;
var options = {direction : "right"};
jQuery(this) .children('.owl-caption') .hide(effect, duration, options);
}
); // mouseover owl-carousel
});// document ready ends<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="container">
<h2>Always link the jQueryui.js otherwise slide toggle effect will not work. To avoid confliction I have added jQuery noConflict</h2>
<div class="item-wrapper">
<div class= "img-items">
<img src="http://damiracle.net/demoimgs/slideeffect/ca1.png">
<div class="owl-caption"><p>Linesaver IV</p> <p><a href="">View Details</a></p>
</div> <!--/owl-caption------------->
</div><!---/img-items-------->
</div> <!----------/item-wrapper----------------->
</div><!------/container----------------->
</body>
</html>Slide a div to right from left on mouseenter
jQuery to Slide a div to right from left on mouseenter
A Pen by amitabha ghosh on CodePen.