CSS Tips: aggiungere una didascalia ad una foto al passaggio del mouse.



Tra le svariate tecniche utilizzabili per migliorare la grafica del nostro blog/sito, quelle più importanti e ricercate riguardano le immagini. La loro presenza è molto importante ed è quasi vitale perchè permette di dare quel tocco di vivacità in più al template che altrimenti risulterebbe troppo “smorto”.

Tra gli effetti più utilizzati dai webmasters troviamo sicuramente quello di modificare dinamicamente un’immagine o una foto, magari al passaggio del mouse sopra di essa (tecnica del mouse-hover).

In questo tutorial vi spiegherò, appunto, come usare la tecnica del mouse-hover per aggiungere una didascalia ad un’immagine.

La tecnica è abbastanza semplice: l’idea è quella di inserire il testo di un hyperlink all’interno della nostra immagine e renderlo invisibile fino a quando non si passa sopra con il mouse. Per rendere la cosa un po’ più “user-friendly”, aggiungiamo un link “Learn more” per evidenziare maggiormente l’azione del mouse-hover.

Ecco come fare:

HTML
Il codice html prevede l’utilizzo di un div contenente l’immagine, il “Learn More” (ma potete metterci quello che volete) ed il testo della didascalia, il tutto all’interno del tag “<a>“.

<div class="imgteaser">
<a href="#">
	<img src="immagine.jpg"/>
	<span class="more">» Learn More</span>
	<span class="desc">
		<strong>Titolo</strong>
		testo della didascalia...
	</span>
</a>
</div>

CSS
Per prima cosa inseriamo lo stile del nostro div e della sua proprietà hover:

.imgteaser {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.imgteaser a {
text-decoration: none;
float: left;
}
.imgteaser a:hover {
cursor: pointer;
}

Aggiungiamo un bordo bianco all’immagine:

.imgteaser a img {
float: left;
margin: 0;
border: none;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}

Quindi, andiamo ad impostare lo stile del “Learn more” e della didascalia (colore del testo, opacità, posizione, bordi, etc…):

.imgteaser a .more {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 1.2em;
color: #fff;
background: #000;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 11px;
left: 11px;
padding: 10px;
margin: 0;
width: 566px;
border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}

Quello che vogliamo ottenere è che la scritta “Learn more” venga resa invisibile al passaggio del mouse, lasciando il posto al testo della didascalia. Putroppo con IE6, non è sufficiente usare solamente display: none;, ma occore impostare anche la proprietà visibility:hidden;


.imgteaser a .desc { display: none; }
.imgteaser a:hover .more { visibility: hidden;}

Questa tecnica può essere applicata in qualsiasi contesto: possiamo usarla nelle nostre gallerie fotografiche per far apparire del testo descrittivo o, in alternativa, per visualizzare il numero di commenti ricevuti quando si passa con il mouse sopra all’mmagine del post.

Alla prossima! ;-)

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • dioz

    molto interessante, segnalo però che sul magico IE6 resta visibile il bg in alpha dopo il primo rollover…

Pinterest