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">

<div class="icdiv">

Deneme Yazımız

</div>

</div>

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.

.buyutulecek{

		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;

}

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...