DEMO van automatische caption.
DEMO van automatische caption.
Om een afbeelding van een automatische caption te voorzien moet je de stylesheet, die hieronder staat, in de head-sectie van jouw pagina plaatsen. Verder staan er een paar regels met "voorbeeld-code" hieronder. Je kan eenvoudig de CSS aanpassen aan jouw eigen wensen. De "tint" (die nu op color:#fdd; staat) is daar een voorbeeld van. Ook de hoogte van de caption ten opzichte van de afbeelding is makkelijk met de "height" (zie .automatische_caption a:hover te wijzigen. Als je de tekst rechts van de afbeelding door wilt laten lopen, hoef je alleen maar de <p> tag met de class "clear_caption" weg te laten. De opbouw van de caption is makkelijk. Alle tekst die in de span "auto-caption" staat wordt bij een hover over het plaatje getoond. De tekst die tussen de <strong> staat zal als "kopje" behandeld worden.
<p class="automatische_caption">
<a href="http://kompoos.nl/css/image-effects/automatic-caption.html"><img width="180" height="272" src="http://static.dns5.nl/automatische-caption.jpg" alt="automatische caption" />
<span class="auto_caption"><strong>DEMO</strong>van automatische caption.</span></a>
</p>
<p class="clear_caption"></p>
<style type="text/css">
.automatische_caption{
overflow:hidden;
float:left;
position:relative}
.automatische_caption a{
text-decoration:none}
.automatische_caption a:hover{
cursor: pointer}
.automatische_caption a img{
margin:0;
border:none;
padding:0px;}
.automatische_caption a .auto_caption{
display:none}
.automatische_caption a:hover .auto_caption{
display:inline-block;
width:100%;
height:40%;
font-size:0.9em;
color:#fdd;
background:#511;
filter:alpha(opacity=70);
opacity:.70;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
position:absolute;
bottom:4px;
left:0px;
padding:1em}
.automatische_caption a:hover .auto_caption strong{
display:block;
font-size:1.3em}
.clear_caption{
clear:both}
</style>