Forum - Bild überlappt im Hintergrund

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Bild überlappt im Hintergrund - Fotoecken füe Bilder

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 11, 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Bild überlappt im Hintergrund - Fotoecken füe Bilder datum

13.11.2023 14:55 (zuletzt bearbeitet: 19.11.2023 22:05)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	329

Hallo ihr Lieben, ich dachte mir, ich zeige euch meine neue Idee.

Inspiriert wurde ich wieder durch @Wolfgang. Es hat mir echt Spaß gemacht und ich hoffe, dass es euch gefällt.

Wie ihr ja schon bemerkt habt, habe ich hier immer noch Probleme mit den Classes, und es kann sein, dass noch kleine Fehler drinnen sind.

Aber ich denke, dass da Wolfgang drüber schaut und mir nochmal mitteilen wird, wo ich noch einen Fehler eingebaut habe.

Ich gebe mir sehr viel Mühe und versuche so gut wie es geht meine Arbeit sauber abzugeben.

Ich habe noch ein Muster im Hintergrund eingebaut für mich im Forum, aber bekomme das nicht hin, dass es im Forum überall anzeigt. Ich denke, ich bin dafür einfach zu blöde. Was nicht angezeigt werden soll, zeigt es an und was angezeigt werden soll, zeigt es nicht an.

Man kann die Bilder einzeln anzeigen, über HTML. Habe sie aber zusammen aufgeschrieben. Die CSS muss komplett in CSS rein, der trennt dann automatisch die 3 verschiedene Bildergrößen.

Man kann sie auch als Foren-Code in der Iconbar einbauen, auch das funktioniert.

Hier habe ich es mal im Beitrag eingefügt, das sieht dann so aus:

Hier habe ich es mal im Portal eingefügt, alle drei, das sieht dann so aus:

Bild 1

1
2
3
4
 
<figure>
  <img src="https://files.homepagemodules.de/b906480/a_1_2cd0d9d6.png" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 

Bild 2

1
2
3
4
 
<figure>
  <img src="https://files.homepagemodules.de/b906480/a_1_2cd0d9d6.png" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 

Bild 3

1
2
3
4
 
<figure>
  <img src="https://files.homepagemodules.de/b906480/avatar-5e1acf65-1.jpg" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 

Und hier mal der Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<style>
 
figure {
  --c: 50px;
  --p: 30px;
  --d: 10px;
  background: red;
  display: inline-block;
  padding: var(--p);
  background:
    radial-gradient(farthest-side at 0 0, #000, #0000) 0 0 / var(--c) var(--c),
    radial-gradient(farthest-side at 100% 100%, #000, #0000) 100% 100% / var(--c) var(--c),
    linear-gradient(#fff 0 0) 50% 50% / calc(100% - var(--p)) calc(100% - var(--p)),
    linear-gradient(#0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--p)) calc(100% - var(--d)),
    linear-gradient(90deg, #0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--d)) calc(100% - var(--p)),
    radial-gradient(farthest-side at 0 100%, #00000018, #0000) calc(100% - var(--d) * 0.5) calc(var(--d) * 0.5) / var(--d) var(--d),
    radial-gradient(farthest-side at 100% 0, #00000018, #0000) calc(var(--d) * 0.5) calc(100% - var(--d) * 0.5) / var(--d) var(--d)
    ;
  background-repeat: no-repeat;
  clip-path: polygon(0 var(--c), var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
 
/* demo */
figure:nth-of-type(1) img {
  width: 300px;
}
 
figure:nth-of-type(2) img {
  width: 300px;
  height: 200px;
}
 
figure:nth-of-type(3) img {
  width: 300px;
  aspect-ratio: 1;
}
 
body {
  background: 
    repeating-linear-gradient(30deg, #fff2 0 10%, #fff0 0 24%),
    repeating-linear-gradient(-23deg, #fff2 0 4%, #fff0 0 14%)
    #c2c9d6;
}
 
img {
  object-fit: cover;
}
 
</style>
 

<figure>
  <img src="https://files.homepagemodules.de/b906480/a_1_2cd0d9d6.png" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 
<figure>
  <img src="https://files.homepagemodules.de/b906480/a_1_2cd0d9d6.png" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 
<figure>
  <img src="https://files.homepagemodules.de/b906480/avatar-5e1acf65-1.jpg" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 
 

Schlie�en

In Zeile 53, 58, 63 kann man die Bildadresse eingeben

In Zeile 54, 59, 64 kann man für das Bild etwas eingeben

Für die Iconbar geht man so vor:

Hier mal der Code, den ich einfach bei Foren-Code eingegeben habe.

Ersetze:

1
 
[bild1]

Mit:

1
 
<figure>   <img src="https://files.homepagemodules.de/b906480/avatar-5e1acf65-1.jpg" />   <figcaption>Bild überlappt im Hintergrund</figcaption> </figure>

CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 

figure {
  --c: 50px;
  --p: 30px;
  --d: 10px;
  background: red;
  display: inline-block;
  padding: var(--p);
  background:
    radial-gradient(farthest-side at 0 0, #000, #0000) 0 0 / var(--c) var(--c),
    radial-gradient(farthest-side at 100% 100%, #000, #0000) 100% 100% / var(--c) var(--c),
    linear-gradient(#fff 0 0) 50% 50% / calc(100% - var(--p)) calc(100% - var(--p)),
    linear-gradient(#0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--p)) calc(100% - var(--d)),
    linear-gradient(90deg, #0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--d)) calc(100% - var(--p)),
    radial-gradient(farthest-side at 0 100%, #00000018, #0000) calc(100% - var(--d) * 0.5) calc(var(--d) * 0.5) / var(--d) var(--d),
    radial-gradient(farthest-side at 100% 0, #00000018, #0000) calc(var(--d) * 0.5) calc(100% - var(--d) * 0.5) / var(--d) var(--d)
    ;
  background-repeat: no-repeat;
  clip-path: polygon(0 var(--c), var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
 
/* demo */
figure:nth-of-type(1) img {
  width: 300px;
}
 
figure:nth-of-type(2) img {
  width: 300px;
  height: 200px;
}
 
figure:nth-of-type(3) img {
  width: 300px;
  aspect-ratio: 1;
}
 
body {
  background: 
    repeating-linear-gradient(30deg, #fff2 0 10%, #fff0 0 24%),
    repeating-linear-gradient(-23deg, #fff2 0 4%, #fff0 0 14%)
    #c2c9d6;
}
 
img {
  object-fit: cover;
}
 
 

Ich hoffe, ich konnte es so gut es geht verständlich erklären und hoffe, dass euch diese Idee und Inspiration gefällt.

Nette Grüße

Daishi

Wolfgang findet das Top!

Antworten

#2 | Fehlersuche: Bild überlappt im Hintergrund datum

15.11.2023 10:14 (zuletzt bearbeitet: 19.11.2023 22:06)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3392
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1278

Fehlersuche: Bild überlappt im Hintergrund

Hallo Daishi.

Klasse Effekt. Sieht wie im Fotoalbum aus.
Könnte man vielleicht in der Vorschau der Bildergalerie benutzen!
Versuche noch zu verstehen, wie der Effekt zustande kommt, echt klasse....

Aber

Das alte Problem....

Wenn man sich die Tags ansieht, stehen sie alleine, ohne Erweiterung!
Das heist, dass die Einträge img und body im Forum alles beeinflussen können!
Wie es aussieht, verwendest Du öfters figure. Hier würden sich die Einträge in Deinem Forum untereinander stören!

Was kann man tun?

Das beste und einfachste ist es die Tags zu erweitern!
<figure> kann man wie ein Div-Container betrachten und mit einer Class erweitern.
Will man die Bilder unterschiedlich formatieren ist es gut zusätzlich eine zweite Class zu vergeben.
<figcaption> wurde in der CSS nicht bedacht, braucht auch nicht mit einer Class erweitert werden!
<img> bekommt wie gehabt eine neue Class!
"body" ist für den gesamten Hintergrund zuständig. Hier muss man schauen, ob man ihn weglassen kann, einem anderen Tag zuordnen kann oder einen neuen Div-Container aufmacht!

Hier mein Vorschlag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<style>
 
/* Format "figure" */ 
figure.figure-format {
  --c: 50px;
  --p: 30px;
  --d: 10px;
  background: red;
  display: inline-block;
  padding: var(--p);
  background:
    radial-gradient(farthest-side at 0 0, #000, #0000) 0 0 / var(--c) var(--c),
    radial-gradient(farthest-side at 100% 100%, #000, #0000) 100% 100% / var(--c) var(--c),
    linear-gradient(#fff 0 0) 50% 50% / calc(100% - var(--p)) calc(100% - var(--p)),
    linear-gradient(#0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--p)) calc(100% - var(--d)),
    linear-gradient(90deg, #0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--d)) calc(100% - var(--p)),
    radial-gradient(farthest-side at 0 100%, #00000018, #0000) calc(100% - var(--d) * 0.5) calc(var(--d) * 0.5) / var(--d) var(--d),
    radial-gradient(farthest-side at 100% 0, #00000018, #0000) calc(var(--d) * 0.5) calc(100% - var(--d) * 0.5) / var(--d) var(--d)
    ;
  background-repeat: no-repeat;
  clip-path: polygon(0 var(--c), var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
 
/* Format Bilder */
figure.figure-format.bild1 img {
  width: 300px;
}
figure.figure-format.bild2 img {
  width: 300px;
  height: 200px;
}
figure.figure-format.bild3 img {
  width: 300px;
  aspect-ratio: 1;
}
 
/* Format Hintergrund der Bilder */
.body-format {
  background: 
    repeating-linear-gradient(30deg, #fff2 0 10%, #fff0 0 24%),
    repeating-linear-gradient(-23deg, #fff2 0 4%, #fff0 0 14%)
    #c2c9d6;
}
/* Format alle Bilder*/
img.img-format {
  object-fit: cover;
}
</style>
 
<!- Mit Div-Container und Hintergrund --> 
<div class="body-format">
 
<figure class="figure-format bild1">
  <img class="img-format" src="https://files.homepagemodules.de/b906480/a_1_2cd0d9d6.png" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 
<figure class="figure-format bild2">
  <img class="img-format" src="https://files.homepagemodules.de/b906480/a_1_2cd0d9d6.png" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 
<figure class="figure-format bild3">
  <img class="img-format" src="https://files.homepagemodules.de/b906480/avatar-5e1acf65-1.jpg" />
  <figcaption>Bild überlappt im Hintergrund</figcaption>
</figure>
 
</div>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann und besten Dank für Deine Arbeit!

Wolfgang

Daishi und 844er finden das Top!

Antworten

#3 | Fotoecken in der Bildergalerie datum

19.11.2023 20:27 (zuletzt bearbeitet: 21.11.2023 07:54)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3392
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1278

Fotoecken in der Bildergalerie

Hallo Daishi.

Deine Inspirationen und Deine Arbeiten sind der Hammer, faszinierender Effekt!!!
Ich habe es hinbekommen in der Business-Bildergalerie die Fotoecken einzubauen, top!
Sie sind nur in den Vorschauen zu sehen, die Groß- und Vollansicht bleibt unberührt!

Was habe ich festgestellt, was habe ich gemacht!

Musste erstmal schauen, wie die Fotoecken zustande kommen, ob "<figure>" und "<figcaption>" unbedingt benötigt werden....
Da in der Bildergalerie eine eigene Beschriftung der Bilder stattfindet, kann man "<figcaption>" unbesorgt weglassen!
"<figure>" lässt sich hier durch DIV-Container ersetzten, der bereits in der Bildergalerie Verwendung finden!
Der Effekt wird durch "background" und "clip-path" erzeugt.
Leider sind die Werte abhängig von der Größe der Bilder. Hier musste nachgesteuert werden.
Es ist nur ein Eintrag in "Eigener CSS Code" notwendig, genial!

Installation nur fürs Business-Template (v4)

Die CSS wird nach Eigener CSS Code kopiert!

Die Größe der Fotoecken wird in Zeile 3 eingestellt
Der Abstand zum äußeren Rand wird in Zeile 4 eingestellt.
In Zeile 5 wird in Zusammenhang mit Zeile 4 die Stärke des Schatten-Effekt beeinflusst!
Die Breite eines Bildes wird in Zeile 8 bestimmt!
In Zeile 24 wird die Breite des Anzeigenfensters eingestellt!
Zeile 8 und Zeile 24 müssen bei Korrekturen im gleichen Maße verändert werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
/* Fotoecken*/
.cat_coverpic img, .gpic_pic img {  
  --c: 50px;
  --p: 25px;
  --d: 10px;
  outline: 1px solid #bbbbbb;
  outline-offset: -25px;
  max-width:250px;
  display: inline-block;
  padding: var(--p) !important;
  margin: auto !important;
  background: #aaaaaa;
  background:
    radial-gradient(farthest-side at 0 0, #000, #0000) 0 0 / var(--c) var(--c),
    radial-gradient(farthest-side at 100% 100%, #000, #0000) 100% 100% / var(--c) var(--c),
    linear-gradient(#fff 0 0) 50% 50% / calc(100% - var(--p)) calc(100% - var(--p)),
    linear-gradient(#0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--p)) calc(100% - var(--d)),
    linear-gradient(90deg, #0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--d)) calc(100% - var(--p)),
    radial-gradient(farthest-side at 0 100%, #00000020, #0000) calc(100% - var(--d) * 0.25) calc(var(--d) * 0.25) / var(--d) var(--d),
    radial-gradient(farthest-side at 100% 0, #00000020, #0000) calc(var(--d) * 0.25) calc(100% - var(--d) * 0.25) / var(--d) var(--d);
  background-repeat: no-repeat;
  clip-path: polygon(0 var(--c), var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
.cat_coverpic, .gpic_pic {width: 320px !important; max-height:250px; height: auto !important;}
.gpicutre_wrap {width:auto !important;}
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Wie sieht es nach dem Einbau aus?

Hier ein Ausschnitt aus der Bildergalerie: Hotel Burj al Arab in Dubai

Bis dann und nochmal besten Dank an Daishi!

Wolfgang

Daishi findet das Top!

Antworten

Forum-Plugin: 'Letzten Beitrag anzeigen' - Mit Vorschau-Erweiterung! � � "Achtung Bauarbeiten" für halbfertige Beiträge" - Teil 1-3

�hnliche Themen

Antworten

Letzter Beitrag

Fehlersuche: Transparenter Hintergrund
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 2 17.12.2023 18:01
Daishi • Zugriffe: 202

Auswahlmenü Bild-Einstellungen und Bilder verlinken optisch anpassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

28.05.2023 12:56
von

Wolfgang • Zugriffe: 358

3D Decken - Karussell / 3D Bilder Galerie / 3D Lightbox / 3D ohne Namen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi

04.10.2022 06:25
von

Wolfgang • Zugriffe: 735

Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 17 05.06.2022 11:39
844er • Zugriffe: 6565

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang

24.07.2024 11:08
von

Wolfgang • Zugriffe: 2578

Bilder vergrößern mit variabler Lupenfunktion!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

21.06.2023 14:42
von

Kipper-Spedition • Zugriffe: 32546

Transparenz-Effekte - Text und Bilder auf transparenten Hintergrundbildern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

29.05.2024 10:24
von

Wolfgang • Zugriffe: 2305

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 20270

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 4628

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €