---
title: "Bild Grossansicht per Hover mit Css anstatt POPUP"
url: "https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup"
source: "typo3.net"
tags: ["Allgemein","Bilder","Frage","HTML & CSS"]
created: "2007-03-22"
last_reply: "2007-03-23"
replies: 9
solved: false
page: 1
pages: 1
lang: "de"
---

# Bild Grossansicht per Hover mit Css anstatt POPUP

Allgemein · 9 Antworten · gestartet 2007-03-22

## Eröffnungsbeitrag

**brainage** · 2007-03-22 · [Beitrag #1](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/1)

Hallo,

ich bräuchte dringend eine wenig hilfe.

Ich möchte gerne eine das Inhalteelement "Text mit Bild" bzw. Bilderlinks so ändern,
dass anstatt eines popups das Bild größer mit der CSS Hover-Funktion angezeigt wird.-

Beispiel und gleichzeitig auch das CSS dazu habe hier gefunden

<http://host.sonspring.com/hoverbox/>

um das zu realisieren muß ich das Bild so darstellen

<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>

also das Bild doppelt anzeigen bzw. als erstes das normale klein gerechnete Bild und danach
das große Bild.

Und hier komme ich nicht weiter ...

kennt jemand eine Extension die das evtl. schon kann
oder hat jemand einen Ansatz für mich wie ich den oben benötigten Link erstellen lassen
kann ?

Leider habe ich bisher noch keinen Eintrag im Forum gefunden.

Falls es hier schon was geben sollte wäre ich auch für den Link dankbar.

mfg

brainage

P.s. Lightbox habe ich mir auch schon angeschaut .. paßt aber eigentlich nicht wie
ich mir das vorstelle ... es sei denn ich hätte eine einstellmöglichkeit übersehen.

Danke an alle  :-)

## Antworten

### [#2](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/2) · just2b · 2007-03-22

Hallo,

lightbox wird aber wohl die richtige Richtung sein.

lg georg

### [#3](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/3) · brainage · 2007-03-22

Hallo danke für die schnelle Antwort aber
lightbox ist eine Lösung mit javascript
ich würde aber gerne eine reine CSS Lösung umsetzen.

Das Lightbox-Verhalten ist mir ein wenig zu dominant.

Ich habe es auch schon mit diesem Ansatz versucht:

```typoscript
tt_content.image >
tt_content.image = COA
tt_content.image {
    10 =< lib.stdheader
    20 = IMAGE
    20 {
        file {
            import =  uploads/pics/
            import.field = image
            import.listNum = 0

            width.field = imagewidth
            width.wrap = |m
            height.field = imageheight
            height.wrap = |m
        }
        altText.field = altText
        titleText.field = titleText
        longdescURL.field = longdescURL
        wrap = <span class="preview">|</span>
    }
```

nur wie bekomme ich das Bild doppelt angezeigt ?

Hier stehe ich grad toal auf dem Schlauch :-(

### [#4](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/4) · just2b · 2007-03-22

Hallo,

das Bild bekommst du so nocheinmal:

```typoscript
20 = IMAGE
20 {
...
}
30 = IMAGE
30 {
...
}
```

georg

### [#5](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/5) · brainage · 2007-03-22

:-)

klar.. danke.. habe ich auch so
nur ich habe jetzt festgestellt warum es nicht
angezeit wird.
Wenn ich das Inhaltselement Text mit Bild nehme
funktionierts nicht.. zwar wird der wrap auch auf
das Bild angewendet aber das Bild wird nur
einmal anzeigt.
Wenn ich aber das Inhaltselement Bild nehme
funktioniert es wie gewünscht..

:-) warum weiß ich aber leider nicht

aber der weg scheint richtig zu sein *freu*

### [#6](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/6) · just2b · 2007-03-22

Hallo,

weil es hier ein eigenes cType gibt >  tt_content.textpic

georg

### [#7](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/7) · brainage · 2007-03-22

Wieder Danke..

Es funktioniert jetzt auch im Text/Image Inhaltselement.

Nur warum wurde dann vorher der wrap auf beides angewendet ?

mfg

brainage

### [#8](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/8) · just2b · 2007-03-22

Hallo,

klick mal auf template > template analyzer > css_styled_content

```typoscript
 613: tt_content.textpic = COA
 614: tt_content.textpic {
 615: 	10 = COA
 616: 	10.if.value = 25
 617: 	10.if.isLessThan.field = imageorient
 618: 	10.10 = < lib.stdheader
 619: 
 620: 	20  = < tt_content.image.20
 621: 	20.text.10 = COA
 622: 	20.text.10 {
 623: 		if.value = 24
 624: 		if.isGreaterThan.field = imageorient
 625: 		10 = < lib.stdheader
 626: 		10.stdWrap.dataWrap = <div class="csc-textpicHeader csc-textpicHeader-{field:imageorient}">|</div>
 627: 	}
 628: 	20.text.20 = < tt_content.text.20
 629: }
```

zeile 620 sollte das klären

georg

### [#9](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/9) · brainage · 2007-03-22

Ok habs verstanden .. denke ich :-)

danke für die Hilfe

gruß

brainage

### [#10](https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup/10) · brainage · 2007-03-23

leider hab ich doch nochmal ne Frage

und zwar wenn ich das mit den 2 Bildern so mache

```typoscript
      20 = IMAGE
      20 {
      ...
      }
      30 = IMAGE
      30 {
      ...
      }
```

bekomme ich wenn ich die die die Linkfunktion benutze 2 Links

also

```html
<a href="link"><img  .. hier das Image.. ></a>
<a href="link"><img  .. hier das Image.. ></a>
```

Ich möchte aber so etwas erhalten

```html
<a href="link"><img  .. hier das Image.. ><img  .. hier das Image.. ></a>
```

vom Ansatz her müßte ich ja hier > tt_content.image.20.1

ansetzen und evtl. mit "append" ansetzen .. leider komme ich hier nicht weiter ..

mfg

---

Quelle: „Bild Grossansicht per Hover mit Css anstatt POPUP“, typo3.net, https://www.typo3.net/d/59888-bild-grossansicht-per-hover-mit-css-anstatt-popup
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.