CSS is an amazing technology, with its help you can create truly amazing things. Using ‘all that power’ you can add any sorts of visual effects to your resource. So today we’ll talk about CSS Image Hover Effects. We’ve prepared a round-up of tutorials for you to add some motion to your designs.
Image hovering can be applied to any picture on your blog or site, just add several lines of code to your CSS file. These effects will definitely amaze your visitors. All that is needed is to put the mouse over and miracle happens. It’s time for me to stop talking and for you to have a look at examples we’ve picked for you. Enjoy these tuts and feel free to use these great effects.
***
***
***
***
***
***
***
***
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .hover1 img {
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.hover1:hover img {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
|
***
***
***
***
***
***
1
2
3
4
5
6
7
8
9
10
| a.cssmouseover {
display:block;
width:200px;
height:300px;
background-image:url(pathto/image.jpg);
background-position:0px 0px;
}
a.cssmouseover:hover {
background-position:0px -300px;
}
|
***
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // Example:
$(document).ready(function(){
$('a.photo').zoom({url: 'photo-big.jpg'});
});
// Using Colorbox with Zoom
$(document).ready(function(){
$('a.photo').zoom({
url: 'photo-big.jpg',
callback: function(){
$(this).colorbox({href: this.src});
}
});
});
|
***
***
***
***
1
2
3
4
5
6
7
8
9
10
11
| .ih_overlay{
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
background:#000;
z-index:10;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
|
No comments:
Post a Comment