Merhaba arkadaşlar. Yine uzun bir aranın ardından ilk yazımı yazıyorum. Bugün css ile çok basit ama gösterişli bir takım şeyler göstereceğim. Css yardımıyla faremiz ile resmimizin üzerine gelindiğinde resmi büyütme ve üzerine eklediğimiz yazıyı gösterme konusunu ele aldım. Hemen kodlarımıza geçelim. Öncelikle html kodumuzu yazalım.
<div class="buyutulecek">Html kodumuzu yazdık ama css kodlarımız olmadan hiçbir işe yaramayacaktır. Şimdi yukarıda kullandığımız class'ları işlevsel hale getireceğiz.
<div class="icdiv">
Deneme Yazımız
</div>
</div>
.buyutulecek{Buyutulecek adlı class'ımızda resmimizi arkaplan olarak ayarladık. Transition kullanarak resmimizin büyüme olayını daha güzel hale getirdik. Transition hakkında detaylı bilgi almak için Css3 Transition Geçiş Efektleri makalemi okuyabilirsiniz. Sonrasında resmin boyutunu ve kenar çizgilerini ayarladık. Hover olayına geldiğimizde resme biraz zoom yaptık diyebiliriz. Aynı zamanda border rengini ayarladık. Sonrasında buyutulecek class'ımızın üzerine gelindiğinde icdiv class'ımızın görünmesini sağladık. Son olarak İcdiv class'ımıza geçtik. Burada konumunu, arkaplan rengini, yazı fontunu, yazı tipini, kenar boşluklarını, kenar çizgisini-rengini, kenar kıvrımlarını, yazı gölgesini ve son olarak bu class'a sahip içeriğin görünmemesi için display'ini none yaptık. Resmin üzerine gelindiğinde bu class'ın görünme olayını zaten yazmıştık yukarıda. Olabildiğince ayrıntılı anlatmaya çalıştım. Yararlı olması dileğiyle, görüşmek üzere...
position:relative;
background:url("gorsel.jpg");
background-size: 100% auto;
background-position: 50% 50%;
transition: background-size .2s;
width: 400px;
height: 242px;
border:solid;
border-width:1px;
border-color:#cccccc;
}
.buyutulecek:hover{
background-size: 120% auto;
border-color:#333333;
}
.buyutulecek:hover .icdiv
{
display:block;
}
.icdiv
{
position:absolute;
bottom:10px;
left:0px;
background-color:#FF8000;
color:#ffffff;
font-family:Arial;
padding:5px;
padding-left:20px;
padding-right:20px;
font-size:20px;
display:none;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border:solid;
border-width:1px;
border-color:#D26900;
border-left:none;
text-shadow: 1px 1px #333333;
}
0 Yorum