gizli

Mozilla Firefox tarayıcısı için hazırlanmış olan eklenti sayfasını inceleyenler bilirler mutlaka. Eklenti resimlerinin olduğu sayfada mouse ile resimlerin üstüne geldiğinizde resmin etrafında ve resimden daha büyük görünmeyen bir pencere ortaya çıkıyor.

Bu özellik sayfaya daha fazla içerik eklenebilmesini sağlayabildiği gibi websayfalarınada ayrıca farklı bir görünüm kazandırıyor. Soh Tanaka tarafından Css kullanılarak hazırlanmış olan bu örnekte sanırım buradan esinlenerek hazırlanmış bir örnek.

Demo örneğinde buluan  resimlere  biraz saydamlık verildiği  için hafif karanlık gözüküyor. Hover efekti yardımıylada  mousenin üstüne geldiği resimler netleşiyor ve açıklamaları altında görünüyor.

 

Kullanım

Css :

<style type="text/css">
body {
	margin: 0;	padding: 0;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.8em;
	background: #1d1d1d url(bg.jpg) repeat;
}

img {border: none;}

ul.columns {
	width: 960px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.columns li {
	width: 220px;
	float: left; display: inline;
	margin: 10px; padding: 0;
	position: relative;
}
ul.columns li:hover {z-index: 99;}

ul.columns li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul.columns li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 210px 10px 20px;
	width: 220px;
	display: none;
	background: #fff;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}
</style>

Html :

<ul class="columns">
	<li>
		<a href="#"><img src="virgin.jpg" alt="" /></a>
        <div class="info">
			<h2>Virgin Racing</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>

	</li>
	<li>
		<a href="#"><img src="dkng.jpg" alt="" /></a>
        <div class="info">
			<h2>DKNG Studios</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>

	<li>
		<a href="#"><img src="dconstruct.jpg" alt="" /></a>
        <div class="info">
			<h2>dConstruct 2010</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>
	<li>

		<a href="#"><img src="hugsformonsters.jpg" alt="" /></a>
        <div class="info">
			<h2>Hugs for Monsters</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>
	<li>
		<a href="#"><img src="hugsformonsters.jpg" alt="" /></a>

        <div class="info">
			<h2>Hugs for Monsters</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>
	<li>
		<a href="#"><img src="dconstruct.jpg" alt="" /></a>
        <div class="info">

			<h2>dConstruct 2010</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>
	<li>
		<a href="#"><img src="dkng.jpg" alt="" /></a>
        <div class="info">

			<h2>DKNG Studios</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>
	<li>
		<a href="#"><img src="virgin.jpg" alt="" /></a>
        <div class="info">
			<h2>Virgin Racing</h2>

            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>
	<li>
		<a href="#"><img src="virgin.jpg" alt="" /></a>
        <div class="info">
			<h2>Virgin Racing</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>
	<li>
		<a href="#"><img src="dkng.jpg" alt="" /></a>
        <div class="info">
			<h2>DKNG Studios</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>

	</li>
	<li>
		<a href="#"><img src="dconstruct.jpg" alt="" /></a>
        <div class="info">
			<h2>dConstruct 2010</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>

	<li>
		<a href="#"><img src="hugsformonsters.jpg" alt="" /></a>
        <div class="info">
			<h2>Hugs for Monsters</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
	</li>
</ul>

Bu Yazıyı Paylaş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla