CSS-Lösung für verschiedene Hover-Effekte bei Produktbild

  • Ein herzliches Hallo,

    da ich auf dem Sprung bin und auf dem Weg zu diesem Forum gefunden habe, wollte ich einmal erfragen, ob jemand von euch eine Lösung bzw. einen Ansatz parat hat, dem ich nachgehen kann.

    Worum geht es?

    Es geht darum, dass ich auf einer Shop-Seite für einen Bilderdienst eine Landingpage erstellen möchte. Auf dieser Landingpage werden verschiedene Styles vorgestellt, neben denen sich jeweils vier Produktbilder befinden, die dann auf die eigentlichen Produkte im Shop verlinkt werden. Der (besseren) Usability wegen sollte ein Anreiz durch ein Mouseover geschaffen werden. In dem Hover-Effekt befindet sich derzeit eine Textzeile mit dem Produktnamen und dem Preis. Diese Zeile soll im Gegensatz zum restlichen Bildbereich weniger Transparent bzw. von der BG-Color dunkler sein, als der Rest.

    So sieht der aktuelle Code aus: (Hier ist sowohl die Textzeile, als auch der restliche Bildbereich in einem Div zusammengefasst und gleich Transparent)

    >> CSS <<

    #produkt_pin { position: relative;
    width: 120px;
    height: 180px;
    top: 0;
    left: 0;
    }
    #produkt_pin img, #produkt_pin div {
    position: absolute;
    width: 120px;
    height: 180px;
    }
    #produkt_pin div {
    opacity: 0;
    text-align: center;
    color: #fff;
    background: #999;
    background: rgba(0,0,0,0.3);
    }
    #produkt_pin:hover img {
    opacity: 0.35;
    }
    #produkt_pin:hover div {
    opacity: 1;
    }

    >> HTML <<

    <div id='produkt_pin'>
    <a href="http://www.zielurl.de">
    <img src='http://www.imageurl.de' alt="Beschreibung | 39€" title="Beschreibung | 39€" width="120px" height="180px" />
    <div>
    <p>Beschreibung Produkt</p>
    <p>>>Preis EUR<<</p>
    </div>
    </div>

    Wie kann ich diesen oben beschriebenen Effekt erzielen? Ich danke schon einmal im Voraus für Eure Antworten.

  • Wenn ich mich richtig erinnere sind sie in XHTMLstrict sogar pflicht.


    Das wäre mir neu.

    Auszug von http://xhtml.com/en/xhtml/reference/img/

    Zitat

    [h=4]Image dimensions[/h]Web browsers render Web pages faster when the size of an image is specified in the width and height attributes . When image dimensions are not specified, some Web browsers will pause rendering the Web page until the image can be downloaded.

  • Danke für das Zitat, Bandit. Von wegen Spezifikation hab ich das wohl mit alt verwechselt. Ich bin es mir auf jeden Fall gewohnt, img-tags mit width und height zu versehen. IMGs sind ja immer inhaltsbezogen und die width und height ist durch das Bild vorgegeben, rein designbezogene Bilder gehören für mich in den Background.

  • Lieber Lukas.
    Auf Gewohnheiten zu beharren, heisst sich dem Verstehen zu verweigern!
    Browser sind doch in der Lage ein Bild unabhängig von seiner vorgegebenen Grösse in jedes beliebige Format zu rendern und das auch noch ohne nennenswerten Qualitätsverlust. Und dann ist da immer noch das Problem des doppelten Stylings. Entweder inline-styling ODER im Stylesheet.

    p.s. Denke nie gedacht zu haben, denn das Denken von Gedanken ist gedankenloses Denken :)

    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

    Einmal editiert, zuletzt von styleshiet (27. September 2012 um 20:24)