Beiträge von zilicopter

  • Link über Bild mit Overlay einsetzen

    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.


    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);}



    HTML
    <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);
    }