Didascalie sulle immagini
Primo esempio
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>
.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:
- max-width: 400px = larghezza massima dell'immagine
- margin: 0 auto = regola per centrare l'immagine nella pagina. Se la togliete, l'immagine si sposterà a sinistra
- font-size: 15px = dimensione del testo della didascalia
- font-family: 'arial', sans-serif = carattere del testo della didascalia
- text-align: center = regola per centrare il testo della didascalia. Valori possibili: left, center, right
- URLimmagine = indirizzo (percorso) dell'immagine
Al posto di "Didascalia" potete scrivere quello che desiderate.
Secondo esempio:
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>
.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.
- max-width: 400px = larghezza massima dell'immagine
- font-size: 12px = dimensione del testo della didascalia
- font-size: 14px = dimensione del testo del titolo
- URL immaginene = indirizzo (percorso) dell'immagine
Al posto di "Titolo" e "Testo della didascalia" potete scrivere quello che desiderate.
Terzo esempio:
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>
.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ì:
- max-width:400px = larghezza massima dell'immagine
- margin: 0 auto; = regola per centrare l'immagine nella pagina. Se la togliete, l'immagine si sposterà a sinistra.
- 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
- URL immagine = indirizzo dell'immagine
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.)
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie
Continua con: