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.
Daten in der CSS
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!
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!