No, non uso javascript..
HTML:
codice:<div class="wrapper_middle"> <div class="sidebar"> <ul class="nav"> [*]CHI SONO <li class="y">IMMAGINI <ul> [*]Album1 [*]Album2 [*]Album3 [*]Album4 [/list] [*]MUSICA [*]VIDEO [*]EVENTI [*]PRESS [*]CONTATTO [*]COMMENTI[/list] </div> <div class="content"> <div class="photobrowse"> <div id="album1"> ALBUM1 <ul>[*][img]../img/photos/prova.jpg[/img][/list] </div> <div id="album2"> ALBUM2 <ul> [*][img]../img/photos/prova.jpg[/img][/list] </div> <div id="album3"> ALBUM 3 <ul>[*][img]../img/photos/prova.jpg[/img][/list] </div> <div id="album4"> ALBUM 4 <ul> [*][img]../img/photos/prova.jpg[/img][/list] </div> </div> </div> </div>
CSS:
Ecco quicodice:div.photobrowse { display: table; width: 783px; } div.photobrowse div { z-index: -1; position: absolute; width: 783px; opacity:0; } div.photobrowse div:target { visibility: visible; position: relative; z-index: 1; width: 783px; opacity: 1; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; padding-top: 200px; margin-top: -200px; } div.photobrowse div:target ul { display: table; width: 728px; margin: 0px auto; } div.photobrowse div:target ul li { width: 100px; height: 80px; padding: 2px; float: left; } div.photobrowse div:target ul li img { width: 100px; height: 80px; opacity: 0.6; border: 1px solid white; -webkit-transition-property: all; -webkit-transition-duration: 0.5s; } div.photobrowse div:target ul li img:hover { opacity:1; width: 120px; height: 100px; margin: -10px; z-index: 1; position: relative; -webkit-transition-property: all; -webkit-transition-duration: 0.5s; }
EDIT: ho modificato la barra di navigazione in quanto erano sbagliati i nomi delle ancore, ho editato il codice prima di upparlo quindi qualche dimenticanza c'è stata ^^


Rispondi quotando