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

  • So vielleicht?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!