-» -» Didascalie sulle immagini

Didascalie sulle immagini

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web

Primo esempio

didascalia 1
Didascalia semplice fissa:

Codice:
<style>
.caption {
    max-width: 400px;
    width: 100%;
    position: relative;
    margin: 0 auto;
}
.caption img {
    width: 100%;
}
.caption-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: black; /*browser che non supportano rgba*/
    background-color: rgba(0,0,0,.4);
    font-size: 15px;
    font-family: 'arial', sans-serif;
    color: #fff;
    padding: 10px;
    margin: 0;
    text-align: center;
}
</style>

<div class="caption">
            <img src="URL immagine">
            <p class="caption-overlay">Didascalia</p>
    </div>

I parametri principali da modificare sono quelli in rosso:
Al posto di "Didascalia" potete scrivere quello che desiderate.

Secondo esempio

didascalia 2

Titolo

Testo della didascalia


Il codice per ottenere questo effetto, è il seguente:
<style>
.caption {
    margin:0 auto;
    width: 100%;
    max-width: 400px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.caption img {
    border: 0;
    width: 100%;
}
.caption span {
    width: 100%;
    padding: 10px;
    color: #dedede;
    font-family: 'arial', sans-serif;
    font-size: 12px;
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
}
.caption span h3 {
    font-size: 14px;
    margin:0 0 6px;
}
.caption:hover span {
    display: block;
}
</style>

<div class="caption">
    <img src="URL immagine" alt="esempio" />
    <span>
        <h3>Titolo</h3>
        Testo della didascalia
    </span>
</div>

I parametri che potete modificare, sono quelli in rosso.

Al posto di "Titolo" e "Testo della didascalia" potete scrivere quello che desiderate.

Terzo esempio

didascalia 2 Testo didascalia


Ecco il codice:
<style>
.caption
{
    width:100%;
    max-width:400px;
    position: relative;
    margin:0 auto;
    overflow:hidden;
}            
.caption img {
    width: 100%;
    border:0;
    transform:scale(1);
    transition:all 1s;
}
.caption:hover img {
    transform:scale(1.05);
}      
.caption-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;
    opacity:0;
    filter:alpha(opacity=0);/*For IE6 - IE8*/
    transition:all 0.6s;
}
.caption:hover .caption-overlay {
    opacity:0.8;
}
.caption-text {
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    font-size:18px;
    font-family: 'arial', sans-serif;
    font-weight: bold;
    top:40%;
    color:white;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    transform:translateY(-20px);
    transition:all .3s;
}
.caption:hover .caption-text {
    transform:translateY(0px);
    opacity:0.9;
}
</style>

<div class="caption">
    <img src="URL immagine">
    <span class="caption-overlay"></span>
    <span class="caption-text">Testo didascalia</span>
</div>

I parametri modificabili sono quelli in rosso, così:
Al posto di "Testo della didascalia" potete scrivere quello che desiderate.
I colori possono essere inseriti con il nome inglese  o con il codice ().

Se volete che nel testo della didascalia ci sia un collegamento cliccabile, potete usare questa stringa:
<a href="URL collegamento" target="_blank">Testo</a>

(Il tag "target="_blank", serve a far aprire il link in una nuova finestra, se non lo desiderate, potete toglierlo.)

Altre didascalie

Visita la pagina Didascalie
Troverai:
Continua con:

Leggi anche: Creare un sito da zero

Mappa del sito
Mappa del sito