Come fare a..‎ > ‎Grafica e disegno‎ > ‎

Didascalie sulle immagini

di Maria Silvana Radice





 
Captions on the images:

Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Immagine con didascalia che appare al passaggio del mouse (1):


Il codice per ottenere questo effetto, è il seguente:

<!DOCTYPE html>
<html>
<head>

<style>

.container{
    text-align:center;
    margin:0 auto;
    width:100%;
    max-width: 400px;
}  

.caption {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.caption img {
    float: left;
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
}

.caption span {
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    color: #dedede;
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
    box-sizing: border-box;
}

.caption span strong {
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    display: block;
    padding-bottom: 5px;
}

.caption:hover span { display: block; }

    </style>
</head>
<body>
   
<div class="container">
<div class="caption">
    <img src="URLimmagine" alt="" />
    <span>
        <strong>Titolo</strong>
        Testo della didascalia
    </span>
</div>
</div>

   
</body>
</html>


I parametri che potete modificare, sono quelli in rosso.

  • max-width: 400px = larghezza massima dell'immagine
  • font-family: Verdana, sans-ser = carattere del testo
  • font-size: 10px = dimensione del testo della didascalia
  • font-size: 11px = dimensione del testo del titolo
  • URLimmagine = indirizzo dell'immagine

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


Per inserire questo codice in Google sites, bisogna usare il metodo descritto in Come inserire codici e scripts in Google sites

Immagine con didascalia che appare al passaggio del mouse (2):


Molto bello questo effetto, ecco il codice:

<html>
</head>
<style>
.rig-cell
{
    width:100%;
    max-width:250px;
    padding:0;
    list-style:none;
    background-color:transparent;
    /* margin:4px;
    box-shadow: 0px 0px 0px 4px #F0F0F0;*/
    display:block;
    position: relative;
    overflow:hidden;
}
              
/* If have the image layer */
.rig-img {
    display:block;
    width: 100%;
    height: auto;
    border:none;
    transform:scale(1);
    transition:all 1s;
}

.rig-cell:hover .rig-img {
    transform:scale(1.05);
}

.rig-cell {margin:0 auto;}
       
/* If have the overlay layer */
.rig-overlay {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: transparent;
   
    opacity:0;
    filter:alpha(opacity=0);/*For IE6 - IE8*/
    transition:all 0.6s;
}
.rig-cell:hover .rig-overlay {
    opacity:0.8;
}

/* If have captions */
.rig-text {
    display:block;
    padding:0 30px;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    font-size:18px;
    font-family: 'Arial', sans-serif;
    font-weight:bold!important;
    top:40%;
    color:white;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    transform:translateY(-20px);
    transition:all .3s;
}

.rig-cell:hover .rig-text {
    transform:translateY(0px);
    opacity:0.9;
}

</style>
</head>
<body>
        <div class="rig-cell">
            <img class="rig-img" src="URLimmagine">
            <span class="rig-overlay"></span>
            <span class="rig-text">Testo didascalia</span>
        </div>  

</body>
</html>

I parametri modificabili sono quelli in rosso, così:
  • background: transparent = è il colore di fondo sotto alla didascalia, ora impostato sul trasparente. Se mettete un altro colore, questo avrà un effetto di semi-trasparenza.
  • font-size:18px = la dimensione del font della didascalia
  • font-family: 'Arial', sans-serif = il carattere del testo della didascalia
  • font-weight:bold =testo della didascalia in grassetto, se lo volete normale, sostituite bold con normal.
  • color:white = colore del testo della didascalia
  • URLimmagine = indirizzo dell'immagine
I colori possono essere inseriti col nome inglese  o col  codice (Editor colori).

Se volete che nel testo della didascalia ci sia un collegamento cliccabile, potete usare questa stringa:

<a href="URL collegamento" target="_blank"><h1>Testo</h1></a>
(Il tag "target="_blank", serve a far aprire il link in una nuova finestra, se non lo desiderate, potete toglierlo.)

Esempio per una parola del testo con colore personalizzato:

<span style="color: #D14841;">Titolo</span>

Per inserire questo codice in Google sites, bisogna usare il metodo descritto in Come inserire codici e scripts in Google sites.

Questo è tutto.




Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in    

Ti e` stato utile questo argomento?



Continua con: