Hyperlink hinter CSS-Formatierte Bilddatei legen

GetPictures · 28.10.2014

Hallo liebe Leute

Ich habe eine Bilddatei auf meiner Website verlinkt, diese wird direkt angezeigt und mit einem CSS-Hovereffekt definiert. Site läuft über WordPress, sollte aber kein Problem sein.

HTML:

<div class="main_pics_box main_pics_vert">
<img class="main_pics pic_vert" src="http://www.getpictures-photography.de/wp-content/uploads/Galerie_Previews/PREVIEW_GALL_WEDDING.jpg">
<div class="main_pics_text main_pics_text_vert">Hochzeiten</div>
</div>

Daten in der CSS

CSS:

.main_pics_box {
    padding: 10px;
}
.main_pics_vert, .main_pics_hor {
    float: centre;
}
.main_pics_vert, .pic_vert, .main_pics_text_vert {
    width: 400px;
    height: 200px;
    margin: 0 auto;
/*RUNDEECKEN*/
    -moz-border-radius: 5px 25px;
/* Firefox */
    -webkit-border-radius: 5px 25px 5px 25px;
/* Chrome, Safari */
    -khtml-border-radius: 5px 25px 5px 25px;
/* Konqueror */
    border-radius: 5px 25px 5px 25px;
/* CSS3 */
/* Internet Explorer */
}
/*.main_pics_hor, .pic_hor, .main_pics_text_hor {
    width: 400px;
    height: 200px;
}
.main_pics {
    -webkit-box-shadow: 4px 4px 5px 0 rgba(50,50,50,0.5);
    -moz-box-shadow: 4px 4px 5px 0 rgba(50,50,50,0.5);
    box-shadow: 4px 4px 5px 0 rgba(50,50,50,0.5);
}*/
.main_pics_text {
    position: relative;
    margin-top: -228px;
    line-height: 200px;
    background: rgba(0,0,0,0.8);
    text-align: center;
    color: white;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
    font-size: 50px;
    font-family: 'Julius Sans One', sans-serif;
}
.main_pics_box:hover .main_pics_text {
    opacity: 1;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
}

Wie bekomme ich jetzt diesen Hyperlink da mit rein, dass der Hyperlink sich quasi "hinter" dem Bild befindet und beim Klick auf dem Bild sich im neuen Fenster öffnet?
Muss ich bei dem Hyperlink die Bilddatei wieder sourcen? Wenn ich das mache hauts mir in jedem Fall alles durcheinander.

Ich hoffe ihr könnt mir da weiterhelfen Jungs! Wäre spitze!

dn3d_fanboy · 28.10.2014

Irgendwie verstehe ich niht so recht, was genau du vorhast.
Wäre es nicht am sinnvollsten, das Bild zu verlinken?

GetPictures · 28.10.2014

Ja schon, aber dann ignoriert es doch die CSS-Formatierung (Hover, Runde Ecken usw)

lachender_engel · 28.10.2014

Wieso soll das was ignoriert werden?
Meines Erachtens muss das so aussehen:

HTML:

<a href="xyz"><img class="main_pics pic_vert" src="http://www.getpictures-photography.de/wp-content/uploads/Galerie_Previews/PREVIEW_GALL_WEDDING.jpg"></a>

GetPictures · 28.10.2014

Okay das funktioniert schon ganz gut. Die runden Ecken sind da und der Link klappt auch.

Ich habe noch einen Hovereffekt mit Text darin. Wie binde ich diesen Effekt am Besten mit ein?

Bin da echt Laie :-(

owieortho · 29.10.2014

Wenn ich Deinen letzten Beitrag richtig verstehe, willst Du bei mouseover/hover einen tooltip mit der URL und die soll anklickbar sein. Dann bringt das title-Attribut nichts, weil es intern kein markup zulässt. Ich habe da aber gerade kürzlich eine interessante Möglichkeit gefunden:
http://www.dynamicdrive.com/dynamicindex5/popinfo.htm
Der "sticky style" macht dann die URL zugänglich.

O.

lachender_engel · 29.10.2014

GetPictures schrieb:
Ich habe noch einen Hovereffekt mit Text darin. Wie binde ich diesen Effekt am Besten mit ein?

Mir fehlt die Vrstellungskraft dessen, was Du umsetzen möchtest bzw. bisher umgesetzt hast.
Zeige doch bitte über einen Link den aktuellen Stand Deiner Seite.

owieortho · 29.10.2014

Denken wir vielleicht alle schon viel zu kompliziert?
Derzeit kann man zwar auf das Bild klicken, aber es führt nirgendwo hin. Soll die URL unter dem Bild das Ziel sein? Dann:

HTML:

<div class="main_pics_text main_pics_text_vert">

    <a href="http://www.getpictures-photography.de/hochzeitsfotografie-galerie">Hochzeiten</a>

</div>

O.

MyBad · 29.10.2014

Ersetze deinen umgebenden DIV-Container mit einem A-Tag. Also so:

HTML:

<a href="http://..." class="main_pics_box main_pics_vert">
<img class="main_pics pic_vert" src="http://www.getpictures-photography.de/wp-content/uploads/Galerie_Previews/PREVIEW_GALL_WEDDING.jpg">
<p></p>
<div class="main_pics_text main_pics_text_vert">Hochzeiten</div>
</a>

GetPictures · 31.10.2014

Dank dir MyBad

Es funktioniert

Genau so wollte ich das haben

Ein kleines weiteres Problem ergab sich nun beim Anreihen mehrere Bilder untereinander. Die Klickfläche für den Link ist doppelt so groß wie das Bild.

Man kann quasi unter dem Bild auch noch auf den Link klicken.
Ich weiß um ehrlich zu sein nicht so richtig wo es herkommt. Hier noch mal die CSS. Ihr seht da sicher eher durch als ich

Code:

.main_pics_vert, .main_pics_hor {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.main_pics_vert, .pic_vert, .main_pics_text_vert {
    width: 400px;
    height: 200px;
}

.main_pics_hor, .pic_hor, .main_pics_text_hor {
    width: 400px;
    height: 200x;
}

.main_pics {
    display: center;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 0 0 0 0 rgba(50,50,50,0.5);
    -moz-box-shadow: 0 0 0 0 rgba(50,50,50,0.5);
    box-shadow: 0 0 0 0 rgba(50,50,50,0.5);
/*RUNDEECKEN*/
    -moz-border-radius: 10px 45px;
/* Firefox*/
    -webkit-border-radius: 10px 45px 10px 45px;
/* Chrome, Safari*/
    -khtml-border-radius: 10px 45px 10px 45px;
/* Konqueror*/
    border-radius: 10px 45px 10px 45px;
/* Internet Explorer*/
}

.main_pics_text {
    position: relative;
    margin-top: -199px;
    line-height: 200px;
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: white;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
    font-size: 50px;
    font-family: "Julius Sans One", sans-serif;
}

.main_pics_box:hover .main_pics_text {
    opacity: 1;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
}

vincitore · 05.11.2014

GetPictures schrieb:
[…]

Ein kleines weiteres Problem ergab sich nun beim Anreihen mehrere Bilder untereinander. Die Klickfläche für den Link ist doppelt so groß wie das Bild.

[…]

Link kaputt?

GetPictures · 05.11.2014

Hallöchen Vincitore... hab solange dran herum gespielt bis ich die Datei gecrasht habe

Aber jetzt gehts wieder und ich habe es sogar so hinbekommen wie ich es wollte!

Schaut schön aufgeräumt aus, so mag ich das

Danke Euch für die vielen Ansätze und für den entscheidenden Lösungsansatz!