3 Tane Harika CSS3 Görüntülü Geçiş Efekti

Modern web’de ilginç etkileşimler oluşturmak için kullanılabilecek çok sayıda teknik vardır, ancak en basit ve en zarif genellikle CSS’dir ve özellikle CSS3 ile gelen eklemelerdir.

Eski günlerde, bu tür bir etki için JavaScript’e güvenmek zorundaydık, ancak tarayıcılar arasında CSS3 için sürekli artan destek sayesinde, artık herhangi bir komut dosyası olmadan bu gibi efektler ayarlamak mümkün. Ne yazık ki CSS3’ü desteklemeyen tarayıcılar (IE9 ve altı) vardır, bu nedenle eski tarayıcılar için bir yedeğe ihtiyacınız olacak veya efekti aşamalı bir iyileştirme olarak değerlendireceksiniz.

Bugün, resim altyazılarını göstermek ve gizlemek için havalı, ancak düzgün fareyle üzerine gelme efektlerini nasıl uygulayabileceğimize bakacağız.

Kodu takip etmeyi tercih ederseniz  , dosyaları buradan indirebilirsiniz.

Demo 1

İlk demo en basitimizdir: resim altyazıyı ortaya çıkarmak için sağa uçacaktır.

HTML

İlk demo’nun HTML’si için sırasız bir liste kullanacağız ve ardından altyazıyı ve resmi içine yerleştireceğiz. Ayrıca demo-1 sınıfını ve efektini de sıralanmamış liste etiketi içine ekleyeceğimizi unutmayın . İşaretleme şöyle görünecektir:

<ul class="demo-1 effect">
    <li>
            <h2>Bu harika bir başlık!</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>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

CSS

CSS  için demo-1 sınıfımız için göreceli konumlandırma ayarlayacağız ve daha sonra genişliği ve yüksekliği ayarlayacağız . Taşan elemanları da gizleyeceğiz. Ben de benim h2 ve p  etiketleri yanı sıra benim görüntü etiketi için bazı temel stilleri koydum . Şimdi etki sınıfımız için konumlandırmayı mutlak olarak ayarlayıp üste ve alta -15px’lik bir marj vereceğiz. Yumuşak bir etki yaratmak için CSS3’ün  geçişini kullanacağız. CSS’miz şöyle görünür:

.demo-1 {
    position:relative;
    width:300px; 
   height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-1 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-1 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-230px;
    right:-330px;
    padding-bottom:200px;
    padding-left:300px
}

---

Demo 2

İkinci demomuzda görüntünün aşağı kayar. Bu, farenizi görüntünün üzerine getirdiğinizde altyazının üzerinde gösterileceği anlamına gelir.

HTML

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">Bu harika bir başlık!</h2>
       <p class="zero">Lorem ipsum dolor sit amet.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

CSS

CSS’miz hemen hemen ilk demo ile aynı olacak, ancak bu sefer görüntümüzü alt kısmın özelliklerini -96px olarak ayarlayarak aşağı doğru hareket ettireceğiz. Yumuşak bir efekt oluşturmak için CSS3’ün geçişini de kullanacağız :

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

---

Demo 3

Son demomuz için saygısız bir kart efekti oluşturacağız. Bu, farenizi görüntünün üzerine getirdiğinizde açıklamayı göstermek için ekseninde döndüreceği anlamına gelir.

HTML

Son demo işaretlememiz için farklı bir yapı kullanacağız. İlk olarak, içindeki bir şekil resim yazısı etiketi ile birlikte HTML5 şekil öğesini kullanacağız . Ayrıca demo-3 sınıfını sırasız listemiz için kullanacağız :

<ul class="demo-3">
    <li>
        <figure>
            <img src="images/image1.jpg" alt=""/>
            <figcaption>
                <h2>Bu harika bir başlık!</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>
            </figcaption>
        </figure>
    </li>
</ul>

CSS

CSS’mizde, şekil görüntüsünü göreceli bir  konuma ayarlayacağız  ve ardından arka yüzün görünürlüğünü gizleyeceğiz . Ayrıca rotateY dönüşümünü kullanacağız : Figcaption için -180 derece ve ardından hem resmin hem de altyazının üzerine gelmek için 180 dereceye değiştireceğiz:

.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}