Hallo zusammen,
gibt es hierzu schon eine CSS Lösung? Würde ungern Templates umbauen.
Paar Ansätze gibt es im Forum aber da greift man in den Quellcode ein.
Die Coursor Lupe ist leider auch keine Lösung.
Hallo zusammen,
gibt es hierzu schon eine CSS Lösung? Würde ungern Templates umbauen.
Paar Ansätze gibt es im Forum aber da greift man in den Quellcode ein.
Die Coursor Lupe ist leider auch keine Lösung.
Wieso nicht einfach mit before oder after machen? Das kannst du dann komplett mit css "erschlagen".
Habe es probiert aber er legte mir das Bild dauern unter das image
Zeig doch mal einen Link zur Seite.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Link bring da nicht viel, da ich keinen code dafür habe, um das icon auf das Bild zu setzen.. es sieht aber wie folgt aus: ich habe diese Vergleichstabelle (hatten wir in einem anderen post) so gelöst, dass der linke Teil fix ist (eigene Tabelle) und der rechte Teil als Umchlagsslider. So kann man zwischen mehreren Anbietern sliden.
Jetzt hat jeder Anbieter 3 screens bei. Habe es erstmal mit Text und Mouse over Lupe gelöst.. schicker wäre es, wenn eine Lupe draufgelegt wäre.
ssss.jpg
Hast Du geantwortet.
Diesen Versuch könntest Du zeigen.
Selbst der Restcode bringt immer was. Man muss sich dann nämlich nichts "Ausdenken" und kann die eigenen Ideen dazu in den Entwicklertools testen.
Ich würde soetwas übrigens auch mit ::before oder ::after versuchen zu lösen.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Der Bildcontainer sollte relativ und das Pseudoelement (::after oder ::before) sollte absolut positioniert werden. Man findet per google auch super viele Beispiele...
HTML
CSSHTML-Code:<div id="element"></div>
HTML-Code:#element { position: relative; width: 200px; height: 200px; background-color: blue; } #element::after { content: ""; width: 150px; height: 150px; background-color: red; position: absolute; }
ich habe das mal auf die KLasse .cboxElement::after gesetzt .. halb funktioniert das aber die Lupen krieg ichnicht positioniert, nur vertikal. Setze ich bei Position einen links oder rechts Abstand, dann legt er alle drei Lupen übereinander und ich kann sie nicht rausziehen.
11111.png
Das einfachste wäre du gibst mal einen Link frei... Das ist alles nur rumgerate...
.cboxElement muss auf relative gesetzt werden,
.cboxElement::after auf absolut,
.cboxElement::after width: 100%; height: 100%; top: 0px; left: 0px; background: deine-lupe.jpg; background-position: center center; content: "";
Geändert von savuti (17.07.2017 um 15:53 Uhr)
Warum sperrst Du Dich so gegen einen Link?
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
hi .. ich nicht, aber der Kunde. Es wird eine Software bworben, die erst Aug live gehe, da kann ich den link nicht offiziell schon posten.
Sonst gerne, da hilfreicher aber hier gehts leider net, sonst krieg ich aufn Deckel.
Aber die ::after Lösung hat geklappt. Vielen Dank an alle.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Lesezeichen