Bild mit Information

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 - Fragen & Antworten! » Bild mit Information

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - 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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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 mit Information datum

09.09.2023 11:07 (zuletzt bearbeitet: 09.09.2023 18:26)

Daishi

Informationen anzeigen

Beiträge:	399
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	347

Bild mit Information, was mache ich falsch, weil ich es nicht sauber im Xobor-Forum hinbekomme?

Im Portal, sowie auch in der Iconbar zeigt es nicht sauber an, mache ich an den Classes etwas falsch? Seit Tagen versuche ich das hinzubekommen, kein Erfolg.

Das Bild ist immer verschoben, habe es auch versucht als Plugin zu erstellen, auch dasselbe, auch verzerrt und verschoben.

Ich hatte nur eine Idee und Inspiration, wollte einfach, dass ich in der Iconbar Bilder einfügen kann für Themen im Forum, um es besser dazustellen.

Habe ständig die Classes geändert, aber kein Erfolg. Ich weiß nicht, wo ich hier in den Classes die Fehler eingebaut habe, dass es im Forum nicht sauber anzeigt.

Hier mal die Codes:

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<style>
body {
  background: #181818;
}
 
#content {
  position: absolute;
  left: 50%;
  top: 5%;
  margin-left: -225px;
  width: 500px;
  height: 500px;
  overflow: hidden;
}
 
#pic {
  position: absolute;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  transition: all .5s ease-in-out;
}
 
#content:hover #pic {
  opacity: .5;
  transition: all .3s ease-in-out;
}
 
#service_box {
  position: absolute;
  height: 60px;
  width: 60px;
  background-color: white;
  z-index: 2;
  left: 50%;
  margin-left: -30px;
  margin-top: 400px;
  border-radius: 50%;
  transition: all .5s ease-in-out;
}
 
#service_box:hover {
  transition: all .3s ease-in-out;
  transform: scale(1.0);
  border-radius: 0%;
  background-color: rgba(#fff,50%);
  margin-left: -175px;
}
 
#info_box {
  display: none;
  position: absolute;
  width: 300px;
  height: 60px;
  margin-left: 60px;
  background-color: rgba(8,8,8,50%);
  z-index: -1;
}
 
#service_box:hover #info_box {
  display: block;
  -webkit-animation: box .5s forwards;
}
 
@-webkit-keyframes box {
  from {opacity: 0;}
  to {opacity: 1;}
}
 
#ueberschrift {
  font-family: 'helvetica', sans-serif;
  color: white;
  font-size: 14pt;
  margin-left: 10px;
  margin-top: 3px;
}
 
#text {
  font-family: 'helvetica', sans-serif;
  color: white;
  font-size: 10pt;
  margin-left: 10px;
  margin-top: -5px; 
}
 
#fragezeichen {
  position: absolute;
  height: 60px;
  width: 60px;
  transform: scale(.4); 
}
  
</style>  
 
<body>
  <div id="content">
    
    <img id="pic" src="https://i.ibb.co/w7Fx7mX/IMG-20220212-162438.jpg/?format=original">
    
    <div id="service_box">
      <img src="https://files.homepagemodules.de/b104774/a_543_c95cacc8.gif" id="fragezeichen">
      <div id="info_box">
        <h1 id="ueberschrift">
          Info:
        </h1> 
        <p id="text">
          Christian beim Streichen.
        </p> 
      </div>
    </div>
    
  </div> 
</body>
 

Schließen

Wie gesagt es war nur eine Idee und Inspiration, finde nur den Fehler nicht das es sauber anzeigt.

Nette Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | RE: Bild mit Information datum

10.09.2023 08:47 (zuletzt bearbeitet: 10.09.2023 09:06)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3843
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1675

Bild mit Information

Hallo Daishi,
habe eine machbare Lösung gefunden.
Interessante Animation, gut gelungen!

Was kann das Skript?

Im Grundzustand ist ein Bild und eine kleiner runden Auslösegrafik zu sehen!
Nach einem Mouseover wird der erklärende Infotext animiert eingeblendet!
Es gibt keine Verzerrung mehr in der kleinen Grafik oder im großen Bild!
Das Bild passt sich der Rahmen-Größe an!

Was habe ich geändert?

Ich habe die body-CSS und den Body-Tag herausgenommen!
Habe allen ID's eine Erweiterung spendiert, damit sie in keinster Weise beeinflussen oder beeinflusst werden!
Wenn man Höhe und Breite für eine Grafik einträgt kommt es zu Verzerrungen!
Für "Background-Images" kann man das z.B. mit "background-size: contain" und für "Img's" mit "object-fit: contain" beheben!
Musste den z-Index anpassen!
Habe das große IMG als Hintergrundgrafik eingetragen!
Habe dem Info-Text ein "min-height" spendiert. Dadurch kann der Text auch etwas länger ausfallen!

Installation

[img=100px]https://files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg[/img]

In Zeile 3 wird das große Bild eingetragen, Zeile 4 verhindert die Verzerrungen im Bild!
Zeile 9+10 bestimmen die Größe des Containers!
In Zeile 78 ist die kleine Auslösegrafik zu finden!
In Zeile 82 wird der Infotext eingetragen!

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<style>
#content2 {
  background-image:url("https://files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg");
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;  
  position:relative;
  margin: 0 auto;
  width: 500px;
  height: 500px;
  z-index:9999998;
}
#service_box2 {
  position: absolute;
  height: 60px;
  width: 60px;
  background-color: #ffffff;
  left: 50%;
  margin-left: -30px;
  margin-top: 400px;
  border-radius: 50%; 
  border: 1px solid #aaaaaa;
  transition: all .5s ease-in-out;
}
#service_box2:hover {
  transition: all .3s ease-in-out;
  transform: scale(1.0);
  border-radius: 0;
  border: none;
  margin-left: -175px;
}
#info_box2 {
  display: none;
  position: absolute;
  width: 350px;
  min-height: 60px;
  background-color: rgba(8,8,8,95%);
  cursor:pointer;
}
#service_box2:hover #info_box2 {
  display: block;
  -webkit-animation: box .5s forwards;
}
 
@-webkit-keyframes box {
  text-align:left;
  from {opacity: 0;}
  to {opacity: 1;}
}
#ueberschrift2 {
  text-align:left;
  font-family: 'helvetica', sans-serif;
  color: #ffffff;
  font-size: 14pt;
  margin:8px 0 5px 70px;
}
#text2 {
  text-align:left;
  font-family: 'helvetica', sans-serif;
  color: #ffffff;
  font-size: 10pt;
  margin:5px 0 5px 70px;
}
#fragezeichen2 {  
  display:block;
  position: absolute;
  height: 60px;
  width: 60px;
  transform: scale(.7);
  z-index:999999;
  object-fit: contain;
}
</style>  
 
 
<div id="content2">    
  <div id="service_box2">
    <img src="https://files.homepagemodules.de/b104774/a_543_c95cacc8.gif" id="fragezeichen2">
    <div id="info_box2">
      <h1 id="ueberschrift2">Info:</h1> 
      <p id="text2">
        Christian beim Streichen. 
      </p> 
    </div>
  </div> 
</div>
 

Schließen

Bis dann und besten Dank
Wolfgang

Daishi findet das Top!

Antworten

Radio Player einbauen » « Seitenmenü - Version 1+2

Ähnliche Themen

Antworten

Letzter Beitrag

Rotierende Animation von Bildern - Würfel Animation
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

11.12.2024 15:19
von

Wolfgang • Zugriffe: 696

Bild überlappt im Hintergrund - Fotoecken füe Bilder
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

19.11.2023 20:27
von

Wolfgang • Zugriffe: 500

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: 614

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

21.11.2025 18:19
von

Dankeschön • Zugriffe: 3454

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: 33910

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: 2929

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: 20866

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: 5230

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! » Bild mit Information

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: 45 €

12%

🎄

⭐