mozaik resimli bir sayfa yapmak

idea

arkadaşlar blogger'da şöyle bişey var: mozaik

şimdi bu söyleceklerimi blogger dan bağımsız bir site için düşünün.

veritabanından sadece resimleri çekip böyle bir sayfa yapmak istiyorum. tıklandığında ilgili konuya gidecek tarzda.. resimin üzerine gelindiğinde yukarıda verdiğim linkteki gibi resimin üzerine gelindiğinde "konu adı" gözükecek.

bunu nasıl yapabilirim? bir örnek kod var mıdır internette? teşekkür ederim..

daRius · 5 Haziran 2011

Css dosyası şu şekildeymiş

Kod:

html,body{background-color:#eee}html{overflow-y:scroll;}#content{position:static;top:0;left:0;right:0;bottom:0;margin:0;padding:0;z-index:1;margin-top:3px;overflow:visible}#wall{position:relative;width:800px;margin:0 auto;z-index:1;background-color:#eee;overflow:visible}.notouch #wall:hover{z-index:2;}.post-wrapper{margin:0 auto;max-width:800px;padding:10px}.brick{position:absolute;border:solid 1px #e3e3e3;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden;background-color:white;cursor:pointer;z-index:1}.notouch .brick{-webkit-transition-property:all,-webkit-transform;-webkit-transition-duration:0.6s,0.3s;-webkit-transition-timing-function:ease-in-out,ease-in;-moz-transition-property:all,-moz-transform;-moz-transition-duration:0.6s,0.3s;-moz-transition-timing-function:ease-in-out,ease-in;-o-transition-property:all,-o-transform;-o-transition-duration:0.6s,0.3s;-o-transition-timing-function:ease-in-out,ease-in;transition-property:all,transform;transition-duration:0.6s,0.3s;transition-timing-function:ease-in-out,ease-in}.card{width:100%;height:100%;display:table;background:#fff;color:#666;font-family:"Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;font-size:13px;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding:10px}.brick.open .card{display:none}.notouch .brick:not(.open):hover{z-index:999!important;-webkit-box-shadow:0 0 8px #999;-moz-box-shadow:0 0 8px #999;-o-box-shadow:0 0 8px #999;box-shadow:0 0 8px #999;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.card .title{color:#333;font-size:16px;display:block;margin-bottom:10px}.card.photo{padding:0}.card.photo .title{display:none;color:#333;background-color:white;padding:10px;opacity:0.8}.notouch .card.photo:hover .title{display:block;}.summary{display:table-row;display:block;overflow:hidden;vertical-align:middle}#virtualWall{visibility:hidden;position:absolute;left:-10000px;top:0;opacity:0}.virtualBrick{border:solid 2px black;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}#header #search{display:none}#header .views{right:0}.touch .brick.open{z-index:999!important;position:relative;}.touch #header .views{display:none!important}.touch #header .slide-control:after{display:none!important}.touch #header,.touch #content,.touch .post-wrapper .post-content{min-width:100px!important}

Yinede google amcayı denemenizi öneririm. Sağ yukardaki seçenekler ve blogspot keywordleri ile şansınızı deneyin.