Hallo zusammen
Ich habe ein Bild mit übergelagertem Text beim hovern. Ich möchte nun gerne einen externen Link auf das ganze Bild legen (nicht auf den Text)
Ich komme aber einfach nicht mehr weiter. Wäre sehr froh um eure Hilfe.
PS: Der CSS code wird automatisch immer so dargestellt, obwohl ich ihn in die Tags gesetzt habe. Unten habe ich ihn daher nochmals pur hingestellt.
h3, p { padding-top: 5px; margin: 0; padding: 0 0 0.5em;}.container-kacheln { margin: 0 auto; max-width: 360px;}.caption { position: relative; overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0);}.caption::before { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; transition: background .35s ease-out;}.caption:hover::before { background: rgba(0, 0, 0, .5);}.caption__media { display: block; min-width: 100%; max-width: 100%; height: auto;}.caption__overlay { position: absolute; top: -20px; right: 0; bottom: 20px; left: 0; padding: 0px; font-size: 18px; color: #fff; text-align: center; -webkit-transform: translateY(100%); transform: translateY(100%); transition: -webkit-transform .5s ease-out; transition: transform .5s ease-out;}.caption:hover .caption__overlay { -webkit-transform: translateY(0); transform: translateY(0);}.caption__overlay__title { background: rgba(255, 255, 255, .7); -webkit-transform: translateY( -webkit-calc(-100% - 10px) ); transform: translateY( calc(-100% - 0px) ); transition: -webkit-transform .5s ease-out; transition: transform .5s ease-out;}.caption:hover .caption__overlay__title { -webkit-transform: translateY(0); transform: translateY(0);}
<div class="container-kacheln">
<article class="caption"><img class="caption__media" src="http://lorempixel.com/300/200" alt="" />
<div class="caption__overlay">
<h3 class="caption__overlay__title">Geometer 6</h3>
<p class="caption__overlay__content">Grenzänderung<br />Parzellierung<br />Liegenschaftskataster<br />Grenzpunktrekonstruktion</p>
</div>
</article>
</div>
CSS:
h3, p {
padding-top: 5px;
margin: 0;
padding: 0 0 0.5em;
}
.container-kacheln {
margin: 0 auto;
max-width: 360px;
}
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: -20px;
right: 0;
bottom: 20px;
left: 0;
padding: 0px;
font-size: 18px;
color: #fff;
text-align: center;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .5s ease-out;
transition: transform .5s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
background: rgba(255, 255, 255, .7);
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 0px) );
transition: -webkit-transform .5s ease-out;
transition: transform .5s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}