galleria

[psyco1978]

galleria

anzitutto mi scuso con tutti voi se questa è la sezione sbagliata per postare il mio problema.

allora io ho creato questa galleria immaggine
per realizzare la galleria di immaggine uso html+css.
questo il codice html:
div id="contenitore">
<div id="css_galleria_1">
<a href="#" id="pic_1"><b><img src="1b.jpg" alt="" /></b><span>Descrizione pic1</span></a>
<a href="#" id="pic_2"><b><img src="img/pic_2.jpg" alt="" /></b><span>Descrizione pic2</span></a>
<a href="#" id="pic_3"><b><img src="img/pic_3.jpg" alt="" /></b><span>Descrizione pic3</span></a>
<a href="#" id="pic_4"><b><img src="img/pic_4.jpg" alt="" /></b><span>Descrizione pic4</span></a>
<a href="#" id="pic_5"><b><img src="img/pic_5.jpg" alt="" /></b><span>Descrizione pic5</span></a>
<a href="#" id="pic_6"><b><img src="img/pic_6.jpg" alt="" /></b><span>Descrizione pic6</span></a>
<a href="#" id="pic_7"><b><img src="img/pic_7.jpg" alt="" /></b><span>Descrizione pic7</span></a>
</div>
</div>
mentre questo e il codice css:
body{
background-color:#000000;
}
img{
border:none;
}
#contenitore{
width:600px;
margin:auto;
margin-top:50px;
color:#FFFFFF;
}
a{
color:#99CC00;
text-decoration:none;
}

/inizio stile css galleria/
#css_galleria_1{
position:relative;
width:595px;
height:370px;
border:1px solid #FFFFFF;
padding:20px 10px 20px 20px;
}
a{
display:block;
float:left;
width:75px;
height:350px;
margin-right:10px;
padding-bottom:10px;
outline:none;
border-bottom:10px solid #333333;
color:#FFFFFF;
text-decoration:none;
}
a:hover{
border-bottom:10px solid #666666;
}
a b, a span{
display:none;
}
a:hover b{
display:block;
position:absolute;
top:20px;
left:20px;
z-index:1;
}
a:hover span{
display:block;
position:absolute;
width:555px;
left:30px;
bottom:50px;
padding:5px;
background-color:#000000;
z-index:2;
}
#pic_1{
background: url(1p.jpg) no-repeat;
}
#pic_2{
background: url(img/pic_2.jpg) no-repeat;
}
#pic_3{
background: url(img/pic_3.jpg) no-repeat;
}
#pic_4{
background: url(img/pic_4.jpg) no-repeat;
}
#pic_5{
background: url(img/pic_5.jpg) no-repeat;
}
#pic_6{
background: url(img/pic_6.jpg) no-repeat;
}
#pic_7{
background: url(img/pic_7.jpg) no-repeat;
margin-right:0;
}

come posso far si, che cpassando con il mouse sull'mmaggine, l'immaggine si ingrandisca prendento tutto il quadro?

[psyco1978]

nessuno sa aiutarmi nel mio problema?

[sandroid]

Ciao psyco1978, e benvenuto nel forum. Analizzando quanto hai scritto in questo spezzone di codice html + css, hai stabilito quali sono le dimensioni dell'immagine in stato di link, ma non in stato di hover, in cui hai solamente impostato un cambiamento del colore del bordo.

#css_galleria_1 a{
display:block;
float:left;
width:75px;
height:350px;
margin-right:10px;
padding-bottom:10px;
outline:none;
border-bottom:10px solid #333333;
color:#FFFFFF;
text-decoration:none;
}

border-bottom:10px solid #666666;
}

Prova ad integrare il secondo blocco css con i richiami alle nuove dimensioni in stato di hover. Così:

border-bottom:10px solid;
width: MAX px;
height: MAX px;
}

Ciao.

[psyco1978]

@sandroid said:

Ciao psyco1978, e benvenuto nel forum. Analizzando quanto hai scritto in questo spezzone di codice html + css, hai stabilito quali sono le dimensioni dell'immagine in stato di link, ma non in stato di hover, in cui hai solamente impostato un cambiamento del colore del bordo.

#css_galleria_1 a{
display:block;
float:left;
width:75px;
height:350px;
margin-right:10px;
padding-bottom:10px;
outline:none;
border-bottom:10px solid #333333;
color:#FFFFFF;
text-decoration:none;
}

border-bottom:10px solid #666666;
}

Prova ad integrare il secondo blocco css con i richiami alle nuove dimensioni in stato di hover. Così:

border-bottom:10px solid;
width: MAX px;
height: MAX px;
}

Ciao.

grazie