Css3 Gecis Efektleri (Transitions)

Eskiden JavaScript ve Flashla yapmakta olduğumuz bir çok işlevi şimdi Css3 gelen yeni özellikler sayesinde fazla kod yazmadan pratik bir şekilde yapma imkanına kavuşuldu.

Bu özelliklerin başında Css3 geçiş (Transitions) efektleridir. Bu yazımızda da resimlere verilen hover efektleri konusunda örnek vermeye çalışacağım.

Bu efektde,  mausla resmin üzerine gelindiğinde resim yukarı çıkarak kaybolacak ve gizlenmiş olan resim yazısı ise açığa çıkacaktır. 

İlk efektimizi oluşturalım. Önce HTML kodlarımızı yazalım. Efektlerimizi sırasız liste şeklinde göstermek üzere container divinin içine ul li yapısı oluşturuyorum.

Resim başlığımı <h2>  etiketi, resimle ilgili bilgiyi de <p> etiketleri arasında oluşturuyorum. 

İmg src ile de resimlerimin yolunu gösteriyorum.

<div class="container">
    <ul class="effect-1">
      <li>
        <h2>Balık Tutan Baba ve Oğul</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nost.</p>
      </li>
      <img class="top"  src="images/image1.jpg" alt=""/>
    </ul>
    <ul class="effect-1">
      <li>
        <h2>Zakintos Adası-Yunanistan</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nost.</p>
      </li>
      <img class="top" src="images/image2.jpg" alt=""/>
    </ul>
    <ul class="effect-1">
      <li>
        <h2>Limon Dilimleriyle Pişmeye Hazır Levrek</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nost.</p>
      </li>
      <img class="top" src="images/image3.jpg" alt=""/>
    </ul>
  </div>

Şimdi css kodlarımızı oluşturalım. Önce body' e background verelim. Sonra container'e genişlik ve yükseklik vererek ortalıyalım.

body {
 background: #3498db;
}
.container {
 width: 400px;
 height: auto;
 margin: 0 auto;
}

Efekt için genişlik ve yüksekik ayarlamak için position' ı relative yapıyoruz ve taşan elemanları overflow: hiddin ile gizliyoruz.

.effect-1 {
 position: relative;
 width: 300px;
 height: 200px;
 overflow: hidden;
 background-color: #0FF;
}

Başlık ve paragraf stil kodlarını yazalım.

.effect-1 p, .effect-1 h2 {
 color: #fff;
 padding: 10px;
 left: -20px;
 top: 20px;
 position: relative;
}
.effect-1 p {
 font-family: "Open Sans", sans-serif;
 font-size: 12px;
 line-height: 18px;
}
.effect-1 h2 {
 font-family: "Open Sans", sans-serif;
 font-size: 20px;
 line-height: 24px;
 margin: 0;
}

Şimdi de efekt sınıfımızın stil kodlarını yazalım ve Css3 geçiş efektlerini kullanalım.

.effect-1 img {
 position: absolute;
 left: 0;
 top: 0;
 cursor: pointer;
 -webkit-transition: top .5s ease-in-out;
 -moz-transition: top .5s ease-in-out;
 -o-transition: top .5s ease-in-out;
 transition: top .5s ease-in-out;
}
.effect-1 img.top:hover {
 top: -230px;
 left: -300px;
 padding-left: 300px;
}

Burada fare ile resmin üzerine gelindiğinde resim yukarı çıkarak kaybolacak ve gizlenmiş olan resim yazısı ise açığa çıkacaktır. 

Kaynak Kodları: İNDİR