Başlık eklemek için en çok zorlandığım örneklerden bir tanesi. Böyle bir örneğe nasıl bir başlık gider diye az düşünmedim. Mouse ile resimlerin üzerine geldiğinizde resimlerin border kısmı için hazırlanmış hover animasyonu devreye giriyor ve resimlerin etrafındaki border (çizgi) bir anlık incelip kalınlaşıyor. Sanki zıplıyormuş gibi bir görüntü çıkıyor ortaya.
Zıplama kelimesini daha önceden blog içindeki yazılarda kullandığımı hatırlamıyorum. Css3 hover efekti için düzgün bir başlık bulamama nedenim bu olsa gerek. İsmini hiç sevmesemde gerçekten çok güzel bir hover efekti gibi görünüyor. Border rengi resimde gördüğünüz gibi gri renkli değil. Orjinali kırmızı renkli ve demoda da kırmızı renkli görünüyor. Resmi optimize edince kırmızı renk çok kötü bir hal aldığı için renk kodlarından demoyu gri ve beyaz rengine çevirmiştim.
Css3 animasyon 300milisaniye içinde resmin olduğu çerçevede border için 5 farklı gölge efektini çalışyırıyor. Bu gölge efekterinin ehr birine ayrı ayrı renk verme imkanı da var. Bu sayede gök kuşağı gibi rengarenk hover efektleri oluşturabilirsiniz. Yada kendi sitenizin temasına uygun renkler belirleyebilirsiniz. Ayrıca border kalınlıklarınıda animasyon kısmında kolaylıkla değiştirebilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Css :
body {
background: #990000;
font: 400 1em Lato, sans-serif;
color: #fff;
text-align: center;
}
.container{
width:500px;
margin: 0 auto;
}
.circle {
display: block;
float:left;
width: 200px;
height: 200px;
box-shadow: 0 0 0 10px #e60000;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.circle img {
width: 100%;
}
.circle:hover {
-webkit-animation: border-bounce 300ms linear;
-moz-animation: border-bounce 300ms linear;
}
.box {
display: block;
width: 200px;
height: 200px;
margin: 40px auto;
box-shadow: 0 0 0 10px #e60000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.box img {
width: 100%;
}
.box:hover {
-webkit-animation: border-bounce 300ms linear;
-moz-animation: border-bounce 300ms linear;
}
@-webkit-keyframes border-bounce {
0% {
box-shadow: 0 0 0 8px #e60000;
}
25% {
box-shadow: 0 0 0 5px #e60000;
}
50% {
box-shadow: 0 0 0 15px #e60000;
}
75% {
box-shadow: 0 0 0 8px #e60000;
}
100% {
box-shadow: 0 0 0 12px #e60000;
}
}
@-moz-keyframes border-bounce {
0% {
box-shadow: 0 0 0 8px #e60000;
}
25% {
box-shadow: 0 0 0 2px #e60000;
}
50% {
box-shadow: 0 0 0 15px #e60000;
}
75% {
box-shadow: 0 0 0 8px #e60000;
}
100% {
box-shadow: 0 0 0 12px #e60000;
}
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="container"> <a href="https://www.mintik.com/?p=13941" class="circle"> <img src="https://placekitten.com/g/500/500" /> </a> <a href="https://www.mintik.com/?p=13941" class="box"> <img src="https://placekitten.com/g/500/500" /> </a> </div>