Ergebnis 1 bis 7 von 7

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

  1. #1
    PatrickVienna
    Gast

    Ausrufezeichen 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="www.zielurl.de">
    <img src='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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    Einmal fehlt Ende des Ankers. Zweimal wieso width/height im img-tag. Ist doch schon im Style. Dreimal doppeltes Styling eines div. Guckst du hier http://cssapps/divers/div_poppic.html
    Geändert von styleshiet (26.09.2012 um 01:38 Uhr)
    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

  3. #3
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

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

    @styleshiet: width/height werden in img-tags angegeben, damit die Seite schon richtig gerendert wird, bevor die Bilder geladen sind. Wenn ich mich richtig erinnere sind sie in XHTMLstrict sogar pflicht.

  4. #4
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    Warum denn dann überhaupt Stylesheets??? Erinnern hilft wenig... Belegen!!!
    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

  5. #5
    Bandit
    Gast

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

    Zitat Zitat von lukasn Beitrag anzeigen
    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/
    Image dimensions

    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.

  6. #6
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

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

    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.

  7. #7
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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
    Geändert von styleshiet (27.09.2012 um 21:24 Uhr)
    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

Ähnliche Themen

  1. verschiedene Skins für verschiedene Ordner einer Seite?
    Von tomrakete im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 23.07.2007, 11:48
  2. verschiedene hover effekte!!!!!
    Von ginko1 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 16.06.2005, 18:00
  3. effekte bei grafiken
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 08.04.2005, 16:56
  4. Verschiedene Link Effekte
    Von BigMäck im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 02.09.2004, 13:27
  5. "css" Verschiedene :hover über das class="&am
    Von vandyce im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 18.04.2004, 15:57

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •