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ı
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
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>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