Antworten auf deine Fragen:
Neues Thema erstellen

Hyperlink hinter CSS-Formatierte Bilddatei legen

G

GetPictures

Guest

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!
 

G

GetPictures

Guest

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

lachender_engel

Aktives Mitglied

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>
 
G

GetPictures

Guest

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

Aktives Mitglied

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.
 

owieortho

Aktives Mitglied

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

localhorst

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>
 
G

GetPictures

Guest

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

GetPictures

Guest

Hallöchen Vincitore... hab solange dran herum gespielt bis ich die Datei gecrasht habe :D 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!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben