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

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

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 icin CSS3 Değişen Resim Efekti Demo 

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

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuILg3AqaHRwHj4HnF-gYYQUSDM8-EUb0j9LdN3XmvH_TwpA4xh9bIC0_OqMYFExXWiycGZtR69Z5GbonAin6cIfYfw56l7_9FBCzoMrdv3sp2-HTSatjrAqjlNezVMSZguoZiaiDl54o/s1600/sunset-sunrise-btrix+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEium_sIUk1lpoA0eNCVKo_MFcZHe7eB93z8MT8PJfmTaj01hIpuUXJyhlHpHiXn2Ku7wlymjKnsaLMFGjuPnNJ301p51IWb678sWoOoGh5MQ0zHFYR3HDJ7x1EgSDkoDSF9OveqWcNFUoo/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.