[ERLEDIGT] socialmedia icons mit overlay

[Joma]

hi, ich hab ein problem mit meinen socialmedia icons, die ich mit einer kleinen überblendung schicker machen wollte. die overlays, die ich dabei gemacht habe, legen sich nicht über die icons, sondern werden verdrängt oder etwas anderes muss sie daran hindern, sich über die icons zu legen. hier der link zu der seite: http://tdfts.com/projects/akvile_test/

vielen dank im voraus :)

 

[hexagonizm]

Hallo Joma

Du solltest die Overlay-div's in den jeweiligen Link verpacken und diesen relativ positionieren.

<a href="#"> 
    <img id="unten" alt="fb" src="img/socialmedia/fb.png">
    <div id="overlayfb"></div>
</a>

#socialmedia a {
    position: relative;
}

Gruss

 

[Joma]

hm jetzt erscheinen die overlays unter den logos. das twitter symbol erscheint garnicht :( habe das auf den alten link geladen

 

[hexagonizm]

Du musst die jeweiligen overlays noch richtig positionieren:

#overlayfb {
    top: 0;
}

Desweiteren solltest du die Links als Block-Elemente darstellen:

#socialmedia a {
    display: block;
    float: left;
    position: relative;
}

 

[hexagonizm]

In deiner CSS-Datei hast du übrigens beim Selektor

#overlaytwitter

das

:hover

vergessen.

 

[Joma]

alles klar, das sieht schon besser aus :) leider liegen die overlays noch nicht ganz über den icons

EDIT: internet explorer und firefox scheitern komplett daran und legen alle overlays übereinander :(

 

[threadi]

Wenn Du Elemente ungleich static positionierst solltest Du ihnen auch einen z-index geben. Über den kannst Du steuern was oben und was unten liegt.

 

[Joma]

Wenn Du Elemente ungleich static positionierst solltest Du ihnen auch einen z-index geben. Über den kannst Du steuern was oben und was unten liegt.

das habe ich bereits :/

 

[Tronjer]

Wozu auch Overlays? Entweder :hover mit background-images oder Austausch von source-images per JS.

 

[Joma]

könntest du mir da ein beispiel code zeigen bitte? :)

 

[Joma]

so habe das problem gelöst http://tdfts.com/projects/akvile_test/