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>

CSS3 3D Button Effects Bootstrap

Preview















Link
Text


Text


Text


Text


Text

HTML



<div class="container">
	<div class="row">
	
        
        <!-- Standard button -->
        <button type="button" class="btn3d btn btn-default btn-lg"><span class="glyphicon glyphicon-download-alt"></span> Default</button>
         
        <button type="button" class="btn3d btn btn-white btn-lg"><span class="glyphicon glyphicon-tag"></span> White</button>
        
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary btn-lg btn3d"><span class="glyphicon glyphicon-cloud"></span> Primary</button>
        
        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success btn-lg btn3d"><span class="glyphicon glyphicon-ok"></span> Success</button>
        
        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info btn-lg btn3d"><span class="glyphicon glyphicon-question-sign"></span> Info</button>
        
        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning btn-lg btn3d"><span class="glyphicon glyphicon-warning-sign"></span> Warning</button>
        
        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger btn-lg btn3d"><span class="glyphicon glyphicon-remove"></span> Danger</button>
        
        <button type="button" class="btn btn-magick btn-lg btn3d"><span class="glyphicon glyphicon-gift"></span> Magick</button>
        
        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <a href="http://www.jquery2dotnet.com/" class="btn btn-link btn-lg btn3d" role="button"><span class="glyphicon glyphicon-globe"></span> Link</a>
        
        <p>
          Text
          <button type="button" class="btn btn-primary btn-lg btn3d"><span class="glyphicon glyphicon-thumbs-up"></span></button>
          <button type="button" class="btn btn-danger btn-lg btn3d"><span class="glyphicon glyphicon-off"></span></button>
        </p>
        <p>
          Text
          <button type="button" class="btn btn-primary btn-lg btn3d">Large button</button>
          <button type="button" class="btn btn-default btn-lg btn3d">Large button</button>
        </p>
        <p>
          Text
          <button type="button" class="btn btn-primary btn3d">Default button</button>
          <button type="button" class="btn btn-default btn3d">Default button</button>
        </p>
        <p>
          Text
          <button type="button" class="btn btn-primary btn-sm btn3d">Small button</button>
          <button type="button" class="btn btn-default btn-sm btn3d">Small button</button>
        </p>
        <p>
          Text
          <button type="button" class="btn btn-primary btn-xs btn3d">Extra small button</button>
          <button type="button" class="btn btn-default btn-xs btn3d">Extra small button</button>
        </p>
	</div>
</div>

CSS


.btn3d {
    position:relative;
    top: -6px;
    border:0;
     transition: all 40ms linear;
     margin-top:10px;
     margin-bottom:10px;
     margin-left:2px;
     margin-right:2px;
}
.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
    -moz-outline-style:none;
         outline:medium none;
}
.btn3d:active, .btn3d.active {
    top:2px;
}
.btn3d.btn-white {
    color: #666666;
    box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.10) inset, 0 8px 0 0 #f5f5f5, 0 8px 8px 1px rgba(0,0,0,.2);
    background-color:#fff;
}
.btn3d.btn-white:active, .btn3d.btn-white.active {
    color: #666666;
    box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,.1);
    background-color:#fff;
}
.btn3d.btn-default {
    color: #666666;
    box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0,0,0,.2);
    background-color:#f9f9f9;
}
.btn3d.btn-default:active, .btn3d.btn-default.active {
    color: #666666;
    box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,.1);
    background-color:#f9f9f9;
}
.btn3d.btn-primary {
    box-shadow:0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#4274D7;
}
.btn3d.btn-primary:active, .btn3d.btn-primary.active {
    box-shadow:0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
    background-color:#4274D7;
}
.btn3d.btn-success {
    box-shadow:0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #5eb924, 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#78d739;
}
.btn3d.btn-success:active, .btn3d.btn-success.active {
    box-shadow:0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
    background-color: #78d739;
}
.btn3d.btn-info {
    box-shadow:0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#39B3D7;
}
.btn3d.btn-info:active, .btn3d.btn-info.active {
    box-shadow:0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
    background-color: #39B3D7;
}
.btn3d.btn-warning {
    box-shadow:0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #D79A34, 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#FEAF20;
}
.btn3d.btn-warning:active, .btn3d.btn-warning.active {
    box-shadow:0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
    background-color: #FEAF20;
}
.btn3d.btn-danger {
    box-shadow:0 0 0 1px #b93802 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #AA0000, 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#D73814;
}
.btn3d.btn-danger:active, .btn3d.btn-danger.active {
    box-shadow:0 0 0 1px #b93802 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
    background-color: #D73814;
}
.btn3d.btn-magick {
    color: #fff;
    box-shadow:0 0 0 1px #9a00cd inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #9823d5, 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#bb39d7;
}
.btn3d.btn-magick:active, .btn3d.btn-magick.active {
    box-shadow:0 0 0 1px #9a00cd inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
    background-color: #bb39d7;
}