Hover-Effects-india

Follow look at the HTML Markup:

<div id=”effect-1″ class=”effects img clearfix”>

<div class=”img”>
<img src=”img/jpg/1.jpg” alt=””>
<div class=”overlay”>
<a href=”#” class=”expand”>+</a>
<a class=”close-overlay hidden”>x</a>
</div>
</div>
<div class=”img”>
<img src=”img/jpg/2.jpg” alt=””>
<div class=”overlay”>
<a href=”#” class=”expand”>+</a>
<a class=”close-overlay hidden”>x</a>
</div>
</div>

</div>

Then look at all the common CSS File and Put this css in your Common File:

.effects {
padding-left: 16px;
}
.effects .img {
position: relative;
float: left;
margin-bottom: 5px;
width: 25%;
overflow: hidden;
}
.effects .img:nth-child(n) {
margin-right: 6px;
}
.effects .img:first-child {
margin-left: -14px;
}
.effects .img:last-child {
margin-right: 0;
}
.effects .img img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}

.overlay {
display: block;
position: absolute;
z-index: 20;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
transition: all 0.5s;
}

a.close-overlay {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 46px;
height: 44px;
font-size: 22px;
font-weight: 702;
color: #fff;
line-height: 45px;
text-align: center;
background-color: #000;
cursor: pointer;
}
a.close-overlay.hidden {
display: none;
}

a.expand {
display: block;
position: absolute;
z-index: 100;
width: 62px;
height: 60px;
border: solid 4px #fff;
text-align: center;
color: #fff;
line-height: 50px;
font-weight: 702;
font-size: 32px;
border-radius: 32px;
}

Then look at the CSS part for the Slide effect:

#effect-1 .overlay {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 0;
}
#effect-1 .overlay a.expand {
left: 0;
right: 0;
bottom: 50%;
margin: 0 auto -30px auto;
}
#effect-1 .img.hover .overlay {
height: 100%;
}

Follow Notes The JavaScript/jQuery:

$(document).ready(function(){
if (Modernizr.touch) {
// show the close overlay button
$(“.close-overlay”).removeClass(“hidden”);
// handle the adding of hover class when clicked
$(“.img”).click(function(e){
if (!$(this).hasClass(“hover”)) {
$(this).addClass(“hover”);
}
});
// handle the closing of the overlay
$(“.close-overlay”).click(function(e){
e.preventDefault();
e.stopPropagation();
if ($(this).closest(“.img”).hasClass(“hover”)) {
$(this).closest(“.img”).removeClass(“hover”);
}
});
} else {
// handle the mouseenter functionality
$(“.img”).mouseenter(function(){
$(this).addClass(“hover”);
})
// handle the mouseleave functionality
.mouseleave(function(){
$(this).removeClass(“hover”);
});
}
});

Som Creative Solutions provide Creative services Web Design kolkata, india and share good tutorial for website skills.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>