CSS yardımı ile gerçekten mükemmel leyler oluşturabilmeniz mümkün, inanılmaz bir teknolojidir. Tüm bu gücü kaynağa görsel efektlerden herhangi birini ekleyebilir kolayca kullanabilirsiniz. Bu yüzden bugün sizlere CSS image hover etkileri hakkında konuşacağım. Eğer tasarımları bazı alanlarını hareket eklemek istiyorsanız sizler için bir raund-up hazırladık.
Image hover özelliğini kullanarak, blog sayfanızda veya hazırladığınız siteleriniz'de kolaylıkla uygulayabilirsiniz, sadece CSS dosyanıza bir kaç satır kod ekleyin. Bu etkiler kesinlikle ziyaretçilerinizi oldukça şaşırtacak. Gerekli olan tek şey fare imleci ile üzerine gelerek mucizeyi görmek. Şimdi konuşmamı durdurmak için sizden izin istiyorum ve örnekleri incelemenizi rica ediyorum. Büyük bir zevk ile bu etkileri kullanmak için çekinmeyin.
***
***
***
***
***
Fancy CSS3 Transitions Image Gallery
***
Snazzy Hover Effects Using CSS3
***
***
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;
}
|
***
***
Awesome CSS3 Image Animated Hover Effects
***
10 Easy Image Hover Effects You Can Copy and Paste
***
CSS3 Image Hover Effects With Caption
***
5 CSS Hover Effects You Will Love To Use
***
Fastest CSS Image Mouseover Effect
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});
}
});
});
|
***
PROXIMITY EFFECT WITH JQUERY AND CSS3
***
Item Blur Effect With CSS3 & jQuery
***
***
IMAGE HIGHLIGHTING AND PREVIEW WITH JQUERY
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);
}
|
***
Hepsi bu kadar, Sizlerde başka örnekler var ise aşağıdaki yorum bölümünü kullanarak ilaveler yapabilirsiniz, zevkli olacağını umuyoruz.
Etiketler: CSS