yandex
Resim Efekt Kodları | En iyi Sözler ve Blog Sitesi
Günün Sözü

Resim Efekt Kodları

Resim Efekt Kodları

data-ad-format="auto">

Bu Yazımızda Resim Efekt Kodları, HTML Resim Efekt Kodları, Site Resim Efekt Kodları, Web Resim Efekt Kodları, Resim Sallandırma Kodu, Efektli Resim Değiştirme Kodu, Üstüne Geldiğinde Gölgeli Büyüyen Resim Kodu, Üstüne Geldiğinde Bilgi Çıkan Resim Kodu, Üstüne Geldiğinde Yanında Büyüğü Çıkan Resim Kodu, Üstüne Geldiğinde Dönen Paylaşım Butonları Kodu Yer Almaktadır.

Resim Efekt Kodları

Yazı içerisinde 2 Sayfa bulunmaktadır.

Yazının en altından Sonraki Sayfaya geçiş yapabilirsiniz. Toplamda 8 Tane Resim Efekt Kodları bulunmaktadır.

Resim Sallandırma Kodu

<!— wWw.Eniyisozler.Net Kod Başlangıcı —>
<style>
.swing{
   -webkit-animation:swinging 10s ease-in-out 0s infinite;
   -moz-animation:swinging 10s ease-in-out 0s infinite;
   animation:swinging 10s ease-in-out 0s infinite;
   -webkit-transform-origin:50% 0;
   -moz-transform-origin:50% 0;
   transform-origin:50% 0;
}
 
@-webkit-keyframes swinging{
   0% { -webkit-transform: rotate(0); }
   5% { -webkit-transform: rotate(10deg); }
   10% { -webkit-transform: rotate(-9deg); }
   15% { -webkit-transform: rotate(8deg); }
   20% { -webkit-transform: rotate(-7deg); }
   25% { -webkit-transform: rotate(6deg); }
   30% { -webkit-transform: rotate(-5deg); }
   35% { -webkit-transform: rotate(4deg); }
   40% { -webkit-transform: rotate(-3deg); }
   45% { -webkit-transform: rotate(2deg); }
   50% { -webkit-transform: rotate(0); }
   100% { -webkit-transform: rotate(0); }
}
 
@-moz-keyframes swinging{
   0% { -moz-transform: rotate(0); }
   5% { -moz-transform: rotate(10deg); }
   10% { -moz-transform: rotate(-9deg); }
   15% { -moz-transform: rotate(8deg); }
   20% { -moz-transform: rotate(-7deg); }
   25% { -moz-transform: rotate(6deg); }
   30% { -moz-transform: rotate(-5deg); }
   35% { -moz-transform: rotate(4deg); }
   40% { -moz-transform: rotate(-3deg); }
   45% { -moz-transform: rotate(2deg); }
   50% { -moz-transform: rotate(0); }
   100% { -moz-transform: rotate(0); }
}
 
@keyframes swinging{
   0% { transform: rotate(0); }
   5% { transform: rotate(10deg); }
   10% { transform: rotate(-9deg); }
   15% { transform: rotate(8deg); }
   20% { transform: rotate(-7deg); }
   25% { transform: rotate(6deg); }
   30% { transform: rotate(-5deg); }
   35% { transform: rotate(4deg); }
   40% { transform: rotate(-3deg); }
   45% { transform: rotate(2deg); }
   50% { transform: rotate(0); }
   100% { transform: rotate(0); }
}
</style>
<img class="swing" src="Resim Linkini Buraya Yazınız." /> 
<img class="swing" src="Resim Linkini Buraya Yazınız." style="
   animation-delay: 0.8s;
   -webkit-animation-delay: 0.8s;
   -moz-animation-delay: 0.8s;
   animation-delay: 0.8s;
   "
/> 
<img class="swing" src="Resim Linkini Buraya Yazınız." style="
   animation-delay: 0.5s;
   -webkit-animation-delay: 0.5s;
   -moz-animation-delay: 0.5s;
   animation-delay: 0.5s;
   "
/>
<!— wWw.Eniyisozler.Net Kod Sonu —>

Efektli Resim Değiştirme Kodu

<!— wWw.Eniyisozler.Net Kod Başlangıcı —>
<style>
 
.pulloutimage{
  position: relative;
}
 
.pulloutimage img{
  position: absolute;
  left: 0;
}
 
.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}
 
.pulloutimage img.original{
  z-index: 1;
}
 
 
@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}
 
@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}
 
@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}
 
.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
   
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
   
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
   
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
   
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}
 
.pulloutimage:hover img.original{
  opacity:0.5;
}
 
</style>
 
<div class="pulloutimage" style="width:330px; height:200px">
<img class="original" src="Resim Linkini Buraya Yazınız." />
<img class="ondemand" src="Resim Linkini Buraya Yazınız." />
</div>
<!— wWw.Eniyisozler.Net Kod Sonu —>

Gölgeli Büyüyen Resim Efekt Kodu

<!— wWw.Eniyisozler.Net Kod Başlangıcı —>
<style type="text/css">
 
.css-gallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
 
.css-gallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
 
</style>
 
<div class="css-gallery">
<img src="Resim Linkini Buraya Yazınız." />
<img src="Resim Linkini Buraya Yazınız." />
</div>
<!— wWw.Eniyisozler.Net Kod Sonu —>

Resmin Yanında Büyüğü Çıkan Resim Efekt Kodu

<!— wWw.Eniyisozler.Net Kod Başlangıcı —>
<style type="text/css">
 
.popup-gallery {
   width: 300px;
   clear: none;
   padding-bottom: 5px;
   padding-right: 5px;
}
 
.popup-gallery a { 
   display:block;
   text-decoration: none;
}
 
.popup-gallery a:hover{
    position:relative;
}
 
.popup-gallery span img {
   border: 1px solid #FFFFFF;
   margin-bottom: 8px;
}
 
.popup-gallery a span {
   position: absolute;
   display:none;
   color: #FFCC00;
   text-decoration: none;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   background-color: #000000;
   font-weight: bold;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 13px;
   padding-left: 10px;
}
 
.popup-gallery img {
border-width: 0;
}
 
.popup-gallery a:hover span { 
   display:block;
   top: 0px;
   left: 300px;
   z-index: 100;
}
 
.resize_thumb {
   width: 300px;
   height : auto;
}
 
</style>
 
<div class="popup-gallery"><a href="Resime Tıklayınca Gidilecek Linki Buraya Yazınız."><img src="Resim Linkini Buraya Yazınız." alt="thumb" class="resize_thumb" /><span>
    <img src="Resim Linkini Buraya Yazınız." alt="large" /><br />
    İstediğiniz Yazıları Bu Alana Yazabilirsiniz.</span></a></div>
<!— wWw.Eniyisozler.Net Kod Sonu —>

Daha Fazla Resim Efekt Kodları‘na Ulaşmak İçin Sonraki Sayfayı Ziyaret Edin.


— 2. Sayfaya Geç —



Bu yazı 1164 kez okundu.

Bu İçeriğe Tepkin Ne Oldu?

YAZAR HAKKINDA

Yahya Güloğlu Yahya Güloğlu Merhaba ben Site Sahibi Yahya Eniyisozler.Net sitesinde her Söz, Mesaj ve Makaleler özenle özgün ve siteye özel olarak uzman yazarlarımız tarafından yazılmıştır. Yararlı Bilgiler ( Blog ) katagori yazıları sizlere Sağlık, Moda, Cilt Bakımı, Güzellik, Cinsellik, Örgü, Bayanlara Özel, El İşleri, Zayıflama Yöntemleri, Ekonomi, Finans, Kredi, Teknoloji, Bankacılık, Diyet, Gezi, Seyahat gibi küçük ama etkili önerileri katagorimizde bulabilirsiniz. Yararlı Bilgiler alanın da yer alan bilgiler bir öneridir. Bunlarla bitmedi Burç uyumları, Fıkralar, Yemek Tarifleri, Şiirler, Şairler, Emojiler ve daha sayamadıklarımı Eniyisozler.net Adresimizde bulabilirsiniz.
Sosyal Medyada Paylaşın:

SON EKLENENLER

Abone Ol
Bildir
guest
0 Yorum
Satır İçi Geri Bildirimler
Tüm yorumları görüntüle
Sponsorlu Bağlantılar
  • ÇOK OKUNAN
  • YENİ
  • YORUM
0
Düşüncelerinizi yazmak istermisiniz? Lütfen yorum yapın.x
()
x