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.
