Blog Hover Uygulama Örneği

5/25/2016
Blog sitelerinde title, açıklama, anahtar kelimeler ve daha bir çok yazı ve blog menülerinin Google hafif dokunuş olarak adlandırdığı özellikle mobil cihazlar üzerinde kullanıcı etkileşimini artırmak için kullanılan blog hover efekti kodlarına bir örnek kod paylaştık.

Blog Hover Uygulama Örneği

Biraz CSS bilginiz varsa bu kodları kullanarak blogunuzda olması gereken yerlerde farklı tasarımlarla hover efekti uyugulaması yapabilirsiniz.
1. Blog Hover Uygulaması CSS Kodları
/* CSS Block */

.beblock {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 10em;
    height: 10em;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    margin: 10px;
}

.beblock__hovershow {
    position: absolute;
    z-index: 1;
    width: 71%;
    height: 71%;
    transform: rotate(45deg);
}

.beblock__hovershow:nth-child(1) {
    top: 0;
    right: 0;
    transform-origin: 100% 0;
}

.beblock__hovershow:nth-child(2) {
    bottom: 0;
    right: 0;
    transform-origin: 100% 100%;
}

.beblock__hovershow:nth-child(3) {
    bottom: 0;
    left: 0;
    transform-origin: 0 100%;
}

.beblock__hovershow:nth-child(4) {
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.beblock__hovershow:hover {
    z-index: 9;
    width: 100%;
    height: 100%;
    transform: none;
}

.beblock__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 10em;
    background: #333;
    color: #fff;
    transition: all .3s ease;
    box-shadow: 0 -10em 0 0 #f56954, 10em 0 0 0 #ba79cb, 0 10em 0 0 #00c0ef, -10em 0 0 0 #ffa812;
}

.beblock__hovershow:nth-child(1):hover ~ .beblock__content {
    transform: translate(0, 100%);
}

.beblock__hovershow:nth-child(2):hover ~ .beblock__content {
    transform: translate(-100%, 0);
}

.beblock__hovershow:nth-child(3):hover ~ .beblock__content {
    transform: translate(0, -100%);
}

.beblock__hovershow:nth-child(4):hover ~ .beblock__content {
    transform: translate(100%, 0);
}
2. Blog Hover Uygulaması HTML Kodları
<p>Farklı yönler blog hover uygulamasını deneyin</p>

<p>↓</p>
<span>→ </span>
<div class="beblock">
    <div class="beblock__hovershow"></div>
    <div class="beblock__hovershow"></div>
    <div class="beblock__hovershow"></div>
    <div class="beblock__hovershow"></div>
    
    <div class="beblock__content">
        Blogger Hover
    </div>
</div>
<span> ←</span>
<p>↑</p>
Logo Görünümlü Blog Başlığı

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok