Title Image Viewer
Con questo semplice codice è possibile inserire delle immagini con un titolo e una descrizione, l'immagine e il titolo saranno visibili mentre la descrizione sarà visibile solo quando si passa con il mouse sull'immagine.
Per inserire un'immagine in questo modo, nel CSS, va inserito
CODICE
.img_view {position: relative; cursor: pointer}
.iv_title {position: absolute; bottom: 0; text-align: center; width: 100%}
.iv_desc {position: absolute; top: 0; height: 100%; width: 100%; text-align: center; display: none}
.img_view:hover .iv_desc {display: block}
/* PERSONALIZZAZIONE */
.img_view {border: 1px solid rgba(0,0,0,.6)}
.iv_title { height: 20px; background: rgba(0, 0, 0, .8); color: #FFF; font-weight: bold}
.iv_desc {background: rgba(0, 0, 0, .9); font-weight: bold; color: #FFF;}
E' possibile modificare, senza pregiudicare il corretto funzionamento,
solo quello che c'è
dopo /* PERSONALIZZAZIONE */. E' possibile inserirlo anche nelle discussioni, potete vedere qui di seguito un esempio
Il passo successivo è incollare, dove si vuole che si visualizzi l'immagine, questo
HTML
<div class="img_view" style="width: WWpx; height: HHpx; background: url(IMG)">
<div class="iv_title">Titolo</div>
<div class="iv_desc">Descrizione</div>
</div>
Modificando
WW con la larghezza dell'immagine,
HH con l'altezza e
IMG con il link. Al posto di
Titolo andrà il titolo dell'immagine e al posto di
Descrizione la descrizione.
Ferrari
Ferrari S.p.A. è una casa automobilistica italiana, fondata da Enzo Ferrari, che produce autovetture sportive d'alta fascia e da gara.
(cit. Wikipedia)
HTML
<div class="img_view" style="width: 250px; height: 150px; background: url(http://www.topautoride.com/wp-content/uploads/2009/08/Ferrari-458.jpg); background-size: 250px 150px">
<div class="iv_title">Ferrari</div>
<div class="iv_desc">
Ferrari S.p.A. è una casa automobilistica italiana, fondata da Enzo Ferrari, che produce autovetture sportive d'alta fascia e da gara.
(cit. Wikipedia)</div>
</div>
