Anzeige

CSS Mouseover - Hilfe bei CSS

CSS Mouseover - Hilfe bei CSS | PSD-Tutorials.de

Erstellt von Foos, 02.07.2009.

  1. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.025
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    CSS Mouseover - Hilfe bei CSS
    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 domdesign | Dominik Geisler | Mediendesign | Portfolio
    bei den Bildern das gleiche, wie es hier zu sehen ist: Head Line. ????? ??????????

    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!
     
    #1      
  2. haseharald

    haseharald Guest

    CSS Mouseover - Hilfe bei CSS
    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?
     
    #2      
  3. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    CSS Mouseover - Hilfe bei CSS
    AW: CSS Mouseover - Hilfe bei CSS

    einfach mal in den code schaun:

    Code (Text):
    1. <div class="plist">
    2.                 <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>
    3. etc. pp.
    4. </div>
    5.  
    Code (Text):
    1. .plist {width:714px;margin:16px -7px 9px -7px;overflow:hidden;}
    2. .plist div {position:relative;display:inline;float:left;margin:0 7px 12px;cursor:pointer;}
    3. .plist div:hover {background:#FF00A4;}
    4. [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]
    5. [COLOR=DarkOrange].plist a:hover [U]{background:url('/img/headline/acprbk.gif') repeat-x 0% 100%;}[/U][/COLOR]
    6. .plist strong {position:absolute;display:block;bottom:4px;opacity:none;}
    7.  
     
    #3      
  4. anoX

    anoX Nicht mehr ganz neu hier

    Dabei seit:
    28.06.2009
    Beiträge:
    136
    Geschlecht:
    weiblich
    Ort:
    Ruhrgebiet
    Software:
    CS6, C4D
    CSS Mouseover - Hilfe bei CSS
    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:

    Code (Text):
    1.  
    2. background:transparent url(/pfad/zum/bild1.gif) repeat-x scroll 0 100%;display:block;
    3. height:150px;
    4. opacity:0.8;
    5. position:relative;
    6. text-decoration:none;
    7. width:200px;
    8.  
    Im Hoverzustand also ".image a:hover" soll Bild 2 erscheinen:

    Code (Text):
    1.  
    2. background:transparent url(/pfad/zum/bild2.gif) repeat-x scroll 0 100%;
    3.  
     
    #4      
  5. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.025
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    CSS Mouseover - Hilfe bei CSS
    AW: CSS Mouseover - Hilfe bei CSS

    das ging ja schnell :)

    naja, ich weiß nur überhaupt nicht, wie ich das auf meine Vorschaubilder anwenden soll!?!
     
    #5      
  6. BigDan

    BigDan Noch nicht viel geschrieben

    Dabei seit:
    03.02.2009
    Beiträge:
    34
    Geschlecht:
    männlich
    Ort:
    Norddeutschland
    CSS Mouseover - Hilfe bei CSS
    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!
     
    #6      
  7. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    CSS Mouseover - Hilfe bei CSS
    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)
    linkbackground semitransparent

    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.
     
    Zuletzt bearbeitet: 02.07.2009
    #7      
  8. tiroler

    tiroler Hat es drauf

    14
    Dabei seit:
    04.11.2006
    Beiträge:
    2.202
    Geschlecht:
    männlich
    Ort:
    Pfalz und Tirol
    Software:
    CS4, C4D R10
    Kameratyp:
    Canon EOS 400D+L-Obj.
    CSS Mouseover - Hilfe bei CSS
    AW: CSS Mouseover - Hilfe bei CSS

    sorry aber wie kann cebito die css datei auslesen ?
     
    #8      
  9. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    CSS Mouseover - Hilfe bei CSS
    #9      
  10. BigDan

    BigDan Noch nicht viel geschrieben

    Dabei seit:
    03.02.2009
    Beiträge:
    34
    Geschlecht:
    männlich
    Ort:
    Norddeutschland
    CSS Mouseover - Hilfe bei CSS
    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! ;)
     
    #10      
  11. RaZMusic

    RaZMusic Noch nicht viel geschrieben

    Dabei seit:
    16.06.2009
    Beiträge:
    15
    Geschlecht:
    männlich
    CSS Mouseover - Hilfe bei CSS
    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 =)
     
    #11      
x
×
×