Blogger için CSS3 Değişen Resim Efekti

MustafaYildiz

Müptela Üye
İYİNET Üyesi
Katılım
16 Haz 2013
Mesajlar
1,249
Beğeniler
0
Konum
İstanbul
#1
Blogger üzerinde gerçekleştirilmesi zor bir adım da resimler arasında geçiş sağlayan efektlerdir. Buna benzer geçiş efektlerini CSS3 tasarımları ile rahatlıkla uygulamanız mümkün. Bu gün sizler ile paylaşacağım kod dizini oldukça basit bir işlem ile çalışıyor. Link ekleyebileceğiniz bir resim üzerine mouse imleci ile gelindiğinde farklı bir görünüm sunuluyor. Neyden bahsedildiği daha net anlaşılsın diye bir adet demo ekledim. Demo örneğindeki resim üzerine geldiğinizde farklı bir görsel sunulduğunu fark edeceksiniz.


Blogger için CSS3 Değişen Resim Efekti Kodları


PHP:
<style type="text/css">

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; 
height: 434px; 
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}


a.nowandthen img:nth-of-type(2){ 
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1){ 
clip: rect(0,0,434px,0); 
opacity: 0;
}

</style>

<a class="nowandthen" href="http://www.bloggerdersleri.com/">
 <img alt="" src="http://2.bp.blogspot.com/-XgMF8m5_I4s/Ua9FXCAkg0I/AAAAAAAAHro/Y5WAydhFEXE/s1600/sunset-sunrise-btrix+(1).jpg" />
 <img alt="" src="http://1.bp.blogspot.com/-VLHb1JqiTWY/Ua9FWGRxVNI/AAAAAAAAHrg/XF1gYctgGSA/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>
Blogger için CSS3 Değişen Resim Efekti Modifiye

Kırmızı olarak verilmiş link resme tıklandığında ulaşılacak olan adres.
Mavi olanlar ise resim dosyaları. (1) olarak işaretlenmiş olan görülecek resmi tanımlar , ( 2 ) olarak işaretlenmiş ise mouse üzerine gelince görünecek resim.
Pembe alan ise paylaşılacak olan resim efektinin boyutunu belirler.


Read more: http://www.bloggerdersleri.com/2013/06/blogger-icin-css3-degisen-resim-efekti.html#ixzz2WdZpNdAa
 

Bu konuyu okuyanlar (Üyeler: 1, Misafirler: 0)

Üst