Auf Thema antworten 2026

Beitrag

<blockquote data-quote="GetPictures" data-source="post: 2439516">Hallo liebe Leute <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":-)" title="Smile&nbsp; &nbsp; :-)" loading="lazy" data-shortname=":-)" />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]&lt;div class=&quot;main_pics_box main_pics_vert&quot;&gt;&lt;img class=&quot;main_pics pic_vert&quot; src=&quot;http://www.getpictures-photography.de/wp-content/uploads/Galerie_Previews/PREVIEW_GALL_WEDDING.jpg&quot;&gt;&lt;div class=&quot;main_pics_text main_pics_text_vert&quot;&gt;Hochzeiten&lt;/div&gt;&lt;/div&gt;[/html]Daten in der CSS[code=CSS].main_pics_box {&nbsp; &nbsp; padding: 10px;}.main_pics_vert, .main_pics_hor {&nbsp; &nbsp; float: centre;}.main_pics_vert, .pic_vert, .main_pics_text_vert {&nbsp; &nbsp; width: 400px;&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; margin: 0 auto;/*RUNDEECKEN*/&nbsp; &nbsp; -moz-border-radius: 5px 25px;/* Firefox */&nbsp; &nbsp; -webkit-border-radius: 5px 25px 5px 25px;/* Chrome, Safari */&nbsp; &nbsp; -khtml-border-radius: 5px 25px 5px 25px;/* Konqueror */&nbsp; &nbsp; border-radius: 5px 25px 5px 25px;/* CSS3 *//* Internet Explorer */}/*.main_pics_hor, .pic_hor, .main_pics_text_hor {&nbsp; &nbsp; width: 400px;&nbsp; &nbsp; height: 200px;}.main_pics {&nbsp; &nbsp; -webkit-box-shadow: 4px 4px 5px 0 rgba(50,50,50,0.5);&nbsp; &nbsp; -moz-box-shadow: 4px 4px 5px 0 rgba(50,50,50,0.5);&nbsp; &nbsp; box-shadow: 4px 4px 5px 0 rgba(50,50,50,0.5);}*/.main_pics_text {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin-top: -228px;&nbsp; &nbsp; line-height: 200px;&nbsp; &nbsp; background: rgba(0,0,0,0.8);&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; color: white;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; -webkit-transition: all .5s linear;&nbsp; &nbsp; -moz-transition: all .5s linear;&nbsp; &nbsp; transition: all .5s linear;&nbsp; &nbsp; font-size: 50px;&nbsp; &nbsp; font-family: &#039;Julius Sans One&#039;, sans-serif;}.main_pics_box:hover .main_pics_text {&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; -webkit-transition: all .5s linear;&nbsp; &nbsp; -moz-transition: all .5s linear;&nbsp; &nbsp; transition: all .5s linear;}[/code]Wie bekomme ich jetzt diesen Hyperlink da mit rein, dass der Hyperlink sich quasi &quot;hinter&quot; 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!</blockquote>

[QUOTE="GetPictures, post: 2439516"] 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>[/html] Daten in der CSS [code=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; }[/code] 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! [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?