Ankündigung

Einklappen
Keine Ankündigung bisher.

Bild mit clip:rect verkleinern und per hover wieder normal

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bild mit clip:rect verkleinern und per hover wieder normal

    Hallo,

    Habe ein Problem - ich muss ein Bild per clip:rect beschneiden, was wunderbar klappt, aber ich schaffe es nicht, es danach mit einem hover wieder auf normalgröße zu bringen. Mein Code sieht bisher so aus:

    Code:
    //Anfang rausgelassen//
    div#surprise {position:absolute; clip:rect(5px, 25px, 25px, 5px);}
    a:hover .bild {background-image:url(http://www.shadowlan.de/kazoom/pictures/surprise.jpg);width:75px;height:75px;} 
    //Mitte rausgelassen//
    ...
    
    
    <div id="surprise">[img]pictures/surprise.jpg[/img]</div>
    //ende rausgelassen//

    die Seite kann man sich wie sie im Moment ist auf www.shadowlan.de/kazoom/main.htm anschauen. Schnelle Hilfe wäre gut!

    Danke,
    Kazoom

  • #2
    Na du hast einen Logikfehler drin, denn dein Container-DIV (#surprise) verändert seine (Clip-)Größe ja nicht. Auf diese Größe kommt es aber an.

    Kommentar


    • #3
      naja, beschneiden ist nicht richtig - es wird ja nur ein teil des bildes durch den clip:rect nicht mehr angezeigt.

      Erstellen Sie ein kleines Überraschungsfeld für Ihre Kunden: Bauen Sie ein Bild (das die Überraschung darstellt) in Ihren Auftritt ein und verbergen Sie dieses Bild komplett oder auch nur fast komplett mit dem clip-Befehl. Befindet sich der Mauszeiger über dem Bild, so soll das gesamte Bild erscheinen. Um diesen Effekt nützen zu können, sollten Sie das Bild in einen a-Tag einschließen, für den Sie das hover-Pseudoelement umdefinieren.

      Kommentar


      • #4
        http://www.lugbz.org/documents/smart....html#homework

        Aber unabhängig davon, dein Clip (~ Fenster) bleibt eben immernoch klein. Wenn du mehr sehen willst, musst du entweder die Wand mit dem Fenster einreißen oder das Fenster vergrößern...

        Kommentar

        Lädt...
        X