Vergrösserungs Lupe oder + auf Bildern

[peter_lang]

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.

[savuti]

Wieso nicht einfach mit before oder after machen? Das kannst du dann komplett mit css "erschlagen".

[peter_lang]

Habe es probiert aber er legte mir das Bild dauern unter das image

[mlweb]

Zeig doch mal einen Link zur Seite.

[peter_lang]

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

[mlweb]

Wieso nicht einfach mit before oder after machen?

Hast Du geantwortet.

Habe es probiert aber er legte mir das Bild dauern unter das image

Diesen Versuch könntest Du zeigen.

Link bring da nicht viel, da ich keinen code dafür habe, um das icon auf das Bild zu setzen.

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.

[savuti]

Habe es probiert aber er legte mir das Bild dauern unter das image

Der Bildcontainer sollte relativ und das Pseudoelement (::after oder ::before) sollte absolut positioniert werden. Man findet per google auch super viele Beispiele...

HTML

<div id="element"></div>

CSS

#element { 
    position: relative;
    width: 200px;
    height: 200px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    position: absolute;
}

[peter_lang]

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

[savuti]

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: "";

[mlweb]

Warum sperrst Du Dich so gegen einen Link?

[peter_lang]

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.