Ultimate image hover effects

DEMO DOWNLOAD
Today I share with you modern design image hover effects using CSS3. In the previous month, I was created ultimate button hover effects that are easy to implement with your HTML pages. And now, create image hover effects which are perfect for portfolio or product listings. For this image animation effects I use transform, translate, transition properties of CSS3.

HTML

<div class="effect-1">
<div class="image-box">
<img src="img-2.jpg" alt="Image-3">
</div>
<div class="text-desc">
<h3>Your Title</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn">Learn more</a></div></div>

CSS

.effect-1{
  float: left; 
  width: 340px; 
  position: relative; 
  overflow: hidden; 
  text-align: center; 
  border: 4px solid rgba(255, 255, 255, 0.9); 
  overflow: visible;
}
.effect-1 img{
  transition: 0.5s;
}
.effect-1:hover img{
  transform: scale(0.3) translateY(-110%);
  position: relative; 
  z-index: 9;
} .effect-1 .text-desc{
  transform: translateY(100%); 
  opacity: 0; 
  padding: 85px 20px 10px; 
  transition: 0.5s;
} .effect-1:hover .text-desc{
  transform: translateY(0px); 
  opacity: 1;
}

JS

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>
<script> $(".project").hover3d({ selector: ".project__card" }); </script>

jQuery Hover3d

DEMO DOWNLOAD HOW TO USE

jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect.

HTML

<div class="project">
<div class="project__card">
<!-- Content element goes here -->
</div>
</div>

CSS

.hover-in{
transition: .3s ease-out;
}
.hover-out{ transition: .3s ease-in; }

JS

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>
<script> $(".project").hover3d({ selector: ".project__card" }); </script>

simple responsive tabs jquery

Prev

1st

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

2nd

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

3rd

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

4rd

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

HTML

<div id="simple-responsive-tab-jquery"><ul class="tab">
<li class="active"><a href="#tab1">1st</a></li>
<li><a href="#tab2">2nd</a></li>
<li><a href="#tab3">3rd</a></li>
<li><a href="#tab4">4th</a></li>
</ul>
<div id="tab1" class="tab active">
<h1>1st</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </div>
<div id="tab2" class="tab none">
<h1>2nd</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </div>
<div id="tab3" class="tab none">
<h1>3rd</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </div>
<div id="tab4" class="tab none">
<h1>4rd</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </div></div>

CSS


#simple-responsive-tab-jquery ul.tab {
padding: 0;
margin: 0px;
}
#simple-responsive-tab-jquery ul.tab li {
display: inline-block;
list-style: outside none none;
width: 24.7%;
}
#simple-responsive-tab-jquery ul.tab li a {
padding: 13px 0;
text-align: center;
font-weight: bold;
background: #454545 none repeat scroll 0 0;
color: #fff;
text-decoration: none;
display: block;
}
#simple-responsive-tab-jquery ul.tab li.active a {
background: #cb0000 none repeat scroll 0 0;
}
#simple-responsive-tab-jquery div.tab {
background: #111;
padding: 10px;
margin-bottom:50px;
color:#fff;
}
#simple-responsive-tab-jquery div.tab.none {
display:none;
}
.clear {
clear: both;
}
#simple-responsive-tab-jquery div.tab.active {
border: 2px solid #cb0000;
}

JS


$(document).ready(function(){
$("#simple-responsive-tab-jquery ul.tab li a").click(function(event){
event.preventDefault();
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
var tab = $(this).attr("href");$("div.tab").not(tab).css("display", "none");
$(tab).fadeIn().addClass("active");
});
});

Bootstrap Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Prev

HTML


<div class="alert-group">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>