CSS Mouseover - Hilfe bei CSS

[Foos]

Hey, ich wollte mal fragen ob mir jemand bei einem CSS-Code helfen kann oder einen parat hat

Und zwar hätt ich gern auf dieser Seite
bei den Bildern das gleiche, wie es hier zu sehen ist:

Wenn man dort über ein Bild fährt endet sich der Balken in dieses Pink. Und es bleibt ein wenig transparent. Also das wäre mir sehr wichtig!

Kann mir jemand helfen? Meine Bildern sollen auch so einen transparenten Balken bekommen wenn man mit der Maus drauf fährt!

...wäre echt super!

 

[haseharald]

AW: CSS Mouseover - Hilfe bei CSS

Ist doch eigentlich ganz einfach. Sie Dir mal den Quelltext und die dazugehörige css von Deinem Linktipp an.

Im Quelltext der Seite findest Du das: <div class="plist">.
Dann such Dir in der css alles raus was mit .plist anfängt und wandle alles auf Deiner Seite passend um.

Hilft das?

 

[cebito]

AW: CSS Mouseover - Hilfe bei CSS

einfach mal in den code schaun:

<div class="plist">
				<div onclick="window.location.href='/portfolio_all/ident/';"><img src="/img/headline/home/home_identica.jpg" alt="айдентика" /><a href="/portfolio_all/ident/"><strong>Creative ID Line<br />Фирменный стиль</strong></a></div>
etc. pp.
</div>

.plist {width:714px;margin:16px -7px 9px -7px;overflow:hidden;}
.plist div {position:relative;display:inline;float:left;margin:0 7px 12px;cursor:pointer;}
.plist div:hover {background:#FF00A4;}
[COLOR=Teal].plist a {position:relative;width:212px;height:174px;margin:-186px 0 0;display:block;padding:6px;[U]background:url('/img/headline/prbk.gif') repeat-x 0% 100%;[/U]color:#FFF;text-decoration:none;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;}[/COLOR]
[COLOR=DarkOrange].plist a:hover [U]{background:url('/img/headline/acprbk.gif') repeat-x 0% 100%;}[/U][/COLOR]
.plist strong {position:absolute;display:block;bottom:4px;opacity:none;}

 

[anoX]

AW: CSS Mouseover - Hilfe bei CSS

Zwei Bilder erstellen:

1 = Hintergrund im Normalzustand
2 = Hintergrund im Hoverzustand

In der .html musst Du deinen Bildern eine Klasse zuweisen z.B. ".image".

Im Normalzustand also ".image a" soll Bild 1 erscheinen:

background:transparent url(/pfad/zum/bild1.gif) repeat-x scroll 0 100%;display:block;
height:150px;
opacity:0.8;
position:relative;
text-decoration:none;
width:200px;

Im Hoverzustand also ".image a:hover" soll Bild 2 erscheinen:

background:transparent url(/pfad/zum/bild2.gif) repeat-x scroll 0 100%;

 

[Foos]

AW: CSS Mouseover - Hilfe bei CSS

das ging ja schnell

naja, ich weiß nur überhaupt nicht, wie ich das auf meine Vorschaubilder anwenden soll!?!

 

[BigDan]

AW: CSS Mouseover - Hilfe bei CSS

Man kann diesen hover Effekt ja auch in der Ecke des Bildes platzieren. Also nicht unten ein Balken, sonder einfach eine Ecke.
Wäre eine Möglichkeit!

 

[sokie]

AW: CSS Mouseover - Hilfe bei CSS

hier mal eine lösung mit teiltransparenten png (für den IE6 muss da noch der png fix dazu)


obwohl man für den IE den fix braucht, hat das den Vorteil, dass man es auf jedes Bild legen kann,ohne das Bild direkt bearbeiten zu müssen, und auch nicht zwei ganze bilddateien laden muss.

 

[tiroler]

AW: CSS Mouseover - Hilfe bei CSS

sorry aber wie kann cebito die css datei auslesen ?

 

[sokie]

AW: CSS Mouseover - Hilfe bei CSS

<link rel="stylesheet" href="/css/styles.css" type="text/css" />

 

[BigDan]

AW: CSS Mouseover - Hilfe bei CSS

Genau, wo die CSS Datein hinterlegt ist steht in der HTML, also im Quelltext den man sich auf der HP mit rechts Klick "Seitenquelltext anzeigen" anzeigen kann.
Ich nutze ein Add-on für Firefox. Heißt Web Developer, da kann man sich auch eine ganze Menge schnell und einfach anzeigen lassen.
Soll jetzt hier aber keine Schlechwerbung sein!

 

[RaZMusic]

AW: CSS Mouseover - Hilfe bei CSS

im endefeckt sehe ich das so das sich das wieder auf jedem Broweser ändert daher kann mann nie 100% eigentlich sagen was mann auf was zeigen will ich weis das sich der quellcode beo Internet Explorer und Firefox in manchen fällen unterschieden aber trodsdem =)