Intoduction :-
Hii Friends...
Today I explain how to make CSS3 image hover effects. On the modern web there are so many techniques that can be used to create interesting interactions, but the simplest and most easy is use CSS, and specifically the additions that came with CSS3. It gives us beautiful animation and transitions or image effects.
Demo :-
Hover Effect
Example :-
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Hover Effect</title>
<style>
.grid figure
{
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 320px;
max-width: 480px;
max-height: 360px;
width: 48%;
background: #3085a3;
text-align: center;
}
.grid figure figcaption
{
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure p
{
letter-spacing: 1px;
font-size: 68.5%;
}
figure.effect-marley figcaption
{
text-align: right;
}
figure.effect-marley h2, figure.effect-marley p
{
position: absolute;
right: 30px;
left: 30px;
padding: 10px 0;
}
figure.effect-marley p
{
bottom: 30px;
line-height: 1.5;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
figure.effect-marley h2
{
top: 30px;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-marley:hover h2
{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-marley h2::after
{
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
figure.effect-marley h2::after, figure.effect-marley p
{
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-marley:hover h2::after, figure.effect-marley:hover p
{
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-marley">
<img src="img/12.jpg" alt="img12"/>
<figcaption>
<h2>DotNet <span>Modules</span></h2>
<p>This is a Plateform, Of new ideas and Interesting modules.</p>
</figcaption>
</figure>
</div>
</div>
</body>
</html>
Hii Friends...
Today I explain how to make CSS3 image hover effects. On the modern web there are so many techniques that can be used to create interesting interactions, but the simplest and most easy is use CSS, and specifically the additions that came with CSS3. It gives us beautiful animation and transitions or image effects.
Demo :-
DotNet Modules
This is a Plateform, Of new ideas and Interesting modules.<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Hover Effect</title>
<style>
.grid figure
{
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 320px;
max-width: 480px;
max-height: 360px;
width: 48%;
background: #3085a3;
text-align: center;
}
.grid figure figcaption
{
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure p
{
letter-spacing: 1px;
font-size: 68.5%;
}
figure.effect-marley figcaption
{
text-align: right;
}
figure.effect-marley h2, figure.effect-marley p
{
position: absolute;
right: 30px;
left: 30px;
padding: 10px 0;
}
figure.effect-marley p
{
bottom: 30px;
line-height: 1.5;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
figure.effect-marley h2
{
top: 30px;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-marley:hover h2
{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-marley h2::after
{
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
figure.effect-marley h2::after, figure.effect-marley p
{
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-marley:hover h2::after, figure.effect-marley:hover p
{
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-marley">
<img src="img/12.jpg" alt="img12"/>
<figcaption>
<h2>DotNet <span>Modules</span></h2>
<p>This is a Plateform, Of new ideas and Interesting modules.</p>
</figcaption>
</figure>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment