CSS: rollover remoti in stile Flickr

Flickr usa un interessante effetto di rollover CSS sulle immagini che fa comparire un riquadro evidenziato in corrispondenza del link selezionato, evidenziando di fatto una parte dell'immagine. Possiamo ricreare il medesimo effetto con i CSS utilizzando il posizionamento contestuale. Vediamo come.

Partiamo dalla seguente immagine:

Vogliamo creare tre link per ciascun membro della band. Ogni volta che si passa con il mouse su un link compare un riquadro evidenziato sul volto di ciascun componente. Creaiamo quindi la seguente struttura:


<ul id="image-map">
	<li><a href="#">Kurt Cobain <span class="icon a"></span></a></li>
	<li><a href="#">Chris Novoselic <span class="icon b"></span></a></li>
	<li><a href="#">Dave Grohl <span class="icon c"></span></a></li>
</ul>

L'immagine sarà inserita come sfondo e i tre elementi span saranno posizionati in modo assoluto e inizialmente nascosti:


#image-map {
	width: 460px;
	height: 240px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
	background: url(nirvana.jpg) no-repeat 0 0;
}

#image-map li {
	text-align: right;
	display: block;
	margin-bottom: 5px;
}
span.icon {
	width: 70px;
	height: 70px;
	border: 2px solid #06c;
	border-radius: 4px;
	position: absolute;
	cursor: text;
	display: none;
}

span.a {
	top: 50px;
	left: 100px;
}

span.b {
	top: 3px;
	left: 195px;
}

span.c {
	top: 66px;
	left: 10px;
}

Quindi i tre elementi saranno mostrati su :hover:


#image-map li a:hover span {display: block;}

Il posizionamento contestuale, creato assegnando alla lista il posizionamento relativo, ha fatto in modo che i tre elementi si posizionassero in relazione al blocco contenitore della lista stessa e non rispetto alla finestra del browser.

Potete visionare l'esempio finale in questa pagina.

Torna su