Blog TemplateMonster Türkiye

Ücretsiz CSS3 Hover Etkileri Kopyala ve Yapıştır

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.

***

Direction-Aware Hover Effect

Demo

***

Circle Hover Effects

Demo

***

Magnifying Glass Overlay

Demo

***

CSS3 Image Hover Effects

Demo

***

Fancy CSS3 Transitions Image Gallery

Demo

***

Snazzy Hover Effects Using CSS3

Demo

***

Popout Details on Hover CSS3

Demo

***

CSS Image Hover 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;
}

***

6 Image Captions

Demo

***

Awesome CSS3 Image Animated Hover Effects

Demo

***

10 Easy Image Hover Effects You Can Copy and Paste

Demo

***

CSS3 Image Hover Effects With Caption

Demo

***

5 CSS Hover Effects You Will Love To Use

Demo

***

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;
}

***

jQuery Zoom

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

Demo

***

Item Blur Effect With CSS3 & jQuery

Demo

***

Fast Hover Slideshow

Demo

***

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