Dein letztes Template ist seltsam programmiert, weil der Link keinen Inhalt hat. Probier mal das hier. Ich habe es noch modifiziert, sodass sowohl das Bild als auch der Caption-Text verlinkt ist.
PHP-Code:
...
<?php
$linkOpen = $this->href ? '<a href="'.$this->href.'"'.($this->linkTitle ? ' title="'.$this->linkTitle.'"' : '').$this->attributes.'>' : '';
$linkClose = $this->href ? '</a>' : '';
?>
<figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
<?= $linkOpen ?>
<?php $this->insert('picture_default', $this->picture); ?>
<?= $linkClose ?>
<?php if ($this->caption): ?>
<figcaption class="caption">
<?= $linkOpen . $this->caption . $linkClose ?>
</figcaption>
<?php endif; ?>
</figure>
...
Mein Test-CSS sah in etwa so aus.
PHP-Code:
figure {
position: relative;
float: left;
}
figure:hover figcaption {
top: 0;
}
figcaption {
position: absolute;
top: 100%;
background-color: rgba(0,0,0,.5);
width: 100%;
height: 100%;
transition: 1s;
}
figure img {
display: block;
}
figcaption a {
display: block;
height: 100%;
}
Lesezeichen