× İletişim Formu Farklı Yönler Hover Uygulaması Arlina Design 9/27/2017 Etiketler : Blogger CSS Blogger CSS3 Arlina Design <!DOCTYPE html> <html> <head> <style> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body{padding:2em;font-size:16px;font-family: 'Fira Sans Condensed', sans-serif;text-align:center} .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;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} .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)} </style> </head> <body> <p>Farklı yönler blog hover uygulamasını deneyin</p> <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> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Farklı Yönler Hover Uygulaması" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Farklı Yönler Hover Uygulaması Arlina Design 9/27/2017 Etiketler : Blogger CSS Blogger CSS3 Arlina Design <!DOCTYPE html> <html> <head> <style> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body{padding:2em;font-size:16px;font-family: 'Fira Sans Condensed', sans-serif;text-align:center} .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;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} .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)} </style> </head> <body> <p>Farklı yönler blog hover uygulamasını deneyin</p> <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> </body> </html>
Yorum Gönder