Blog Hover Uygulama Örneği

25.5.16
Blog Hover Uygulama Örneği

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.

Bknz: Logo Görünümlü Blog Başlığı

Biraz CSS bilginiz varsa bu kodları kullanarak blogunuzda olması gereken yerlerde farklı tasarımlarla hover efekti uyugulaması yapabilirsiniz.

Blog Hover Uygulaması CSS Kodları

.block{position:relative;display:inline-block;overflow:hidden;width:10em;height:10em;vertical-align:middle;-webkit-transform:translateZ(0);margin:10px}
.block_hover{position:absolute;z-index:1;width:71%;height:71%;transform:rotate(45deg)}
.block_hover:nth-child(1){top:0;right:0;transform-origin:100% 0}
.block_hover:nth-child(2){bottom:0;right:0;transform-origin:100% 100%}
.block_hover:nth-child(3){bottom:0;left:0;transform-origin:0 100%}
.block_hover:nth-child(4){top:0;left:0;transform-origin:0 0}
.block_hover:hover{z-index:9;width:100%;height:100%;transform:none}
.block_content{position:absolute;background:#333;top:0;left:0;width:100%;height:100%;text-align:center;line-height:10em;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}
.block_hover:nth-child(1):hover ~ .block_content{transform:translate(0,100%)}
.block_hover:nth-child(2):hover ~ .block_content{transform:translate(-100%,0)}
.block_hover:nth-child(3):hover ~ .block_content{transform:translate(0,-100%)}
.block_hover:nth-child(4):hover ~ .block_content{transform:translate(100%,0)}

Blog Hover Uygulaması HTML Kodları

<p>↓</p>
<span>→ </span>
<div class="block">
<div class="block_hover"></div>
<div class="block_hover"></div>
<div class="block_hover"></div>
<div class="block_hover"></div>
<div class="block_content">
Hover
</div>
</div>
<span> ←</span>
<p>↑</p>


Faydalı mı?
Blogger
Disqus
Yorum Ekle

Hiç yorum yok