Simple image hover effect using CSS
This post is about No image hover effect using CSS. This is very cool effect. And we all know hover effect mainly use for attractive of a web page. It is very easy to understand and implement of your website. And this is very simple , basic and easy tutorial. So lets start...
![]() |
HTML Code
<h2>No Effect</h2>
<div class="column">
<div>
<figure><img src="img/pic01.jpg" /></figure>
<span>Your Title</span>
</div>
<div>
<figure><img src="img/pic02.jpg" /></figure>
<span>Your Title</span>
</div>
<div>
<figure><img src="img/pic03.jpg" /></figure>
<span>Your Title</span>
</div>
</div>
<div class="column">
<div>
<figure><img src="img/pic01.jpg" /></figure>
<span>Your Title</span>
</div>
<div>
<figure><img src="img/pic02.jpg" /></figure>
<span>Your Title</span>
</div>
<div>
<figure><img src="img/pic03.jpg" /></figure>
<span>Your Title</span>
</div>
</div>
CSS Code
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
color: #333;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
h1,
h1+p {
margin: 30px 15px 0;
font-weight: 300;
}
h1+p a {
color: #333;
}
h1+p a:hover {
text-decoration: none;
}
h2 {
margin: 60px 15px 0;
padding: 0;
font-weight: 300;
}
h2 span {
margin-left: 1em;
color: #aaa;
font-size: 85%;
}
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
body {
color: #333;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
h1,
h1+p {
margin: 30px 15px 0;
font-weight: 300;
}
h1+p a {
color: #333;
}
h1+p a:hover {
text-decoration: none;
}
h2 {
margin: 60px 15px 0;
padding: 0;
font-weight: 300;
}
h2 span {
margin-left: 1em;
color: #aaa;
font-size: 85%;
}
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
![]() |
Live Demo |
|

Comments ( 0 )
Subscribe Latest Information
Categories
Most Popular Posts
How to Withdraw Money from ATM Machine 7steps 1180843 Views
How to Create Chat Application in Android Studio 152391 Views
How to Create a Shopping Cart Application in Android 115489 Views
You May Like Also
Flip Hover Effects using HTML and CSS 5165 Views
Blur image hover effect using CSS 5280 Views
Flashing image hover effect using CSS 7633 Views