CSS Socialmedia-Buttons: Images übereinander lagern

[raven16]

Hallo,

ich habe Socialmedia-Buttons auf meiner Homepage. Diese sind grau und sollen bei hover mit css in Farbe dargestellt werden. Dazu habe ich jeweis pro Button zwei Images. Ich möchte die beiden Buttons übereinander legen und bei hover soll der background des oberen deaktiviert werden, sodass der untere farbige Background gezeigt wird. Leider klappt dies bisher noch nicht, dass heißt zur Zeit wird nur der farbige Background gezeigt.
HTML

<a href="#" class="btn-socialmedia" style="background:url('Image-Pfad');">
	<span class="btn-socialmedia" style="background:url('Image-Pfad');"></span>
</a>
<a href="#" class="btn-socialmedia" style="background:url('Image-Pfad');">
	<span class="btn-socialmedia" style="background:url('Image-Pfad');"></span>
</a>
<a href="#" class="btn-socialmedia" style="background:url('Image-Pfad');">
	<span class="btn-socialmedia" style="background:url('Image-Pfad');"></span>
</a>

Den Image-Pfad habe ich aus Platzgründen mal rausgelassen.

CSS

a.btn-socialmedia{
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-right: 10px;
	background-repeat: no-repeat !important;
	background-position: center !important;
	z-index: 101 !important;
}
a.btn-socialmedia:hover{
	background: none !important;
}
span.btn-socialmedia{
	display: block;
	width: 48px !important;
	height: 48px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	z-index: 100;
}

Was mache ich falsch?

 

[siebling]

Dein <span> überlagert den <a>-Bereich komplett, da er in <a> liegt. Selbst wenn <a> also seinen Hintergrund verliert, siehst du das nicht, da <span> weiterhin munter die vordere Sicht abdeckt. Ich tippe darauf, dass der z-index nicht hilft.

 

[Darrel]

Erstens ein paar Fragen:

Gibt es einen wichtigen Grund dafür, dass du inline-css benutzt?

Wieso verwendest du fast überall !important?

Es wäre doch viel einfacher, wenn du das Bild in Graustufen als Hintergrundbild hast und dieses dann beim hovern durch die bunte Version ersetzt:

HTML:
<a href="#" class="btn-socialmedia">
  <span class="btn-socialmedia"></span>
</a>

CSS:
a.btn-socialmedia{
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: center;	
  background-image: url('Image-Pfad');
 
}
a.btn-socialmedia:hover{
	background-image: url(''Image-Pfad');
}

Und noch eine Sache zur Nutzung von z-index: Dieser funktioniert nur bei positionierten Elementen (position: absolute;, position: relative; oder position: fixed)

 

[raven16]

Erstens ein paar Fragen:
Gibt es einen wichtigen Grund dafür, dass du inline-css benutzt?

Ja, die Buttons sollten nebeneinander sein.

Wieso verwendest du fast überall !important?

Weil ich Bootstrap verwende und teilweise greifen dadurch meine eigenen CSS-Einstellungen nicht.

Es wäre doch viel einfacher, wenn du das Bild in Graustufen als Hintergrundbild hast und dieses dann beim hovern durch die bunte Version ersetzt

Genau das wollte ich vermeiden, weil manchmal nicht so performant funktioniert, d.h. der Background wird nicht immer direkt geladen bei MouseOver. Zumindest war so bisher meine vergangene Erfahrung gewesen.

Und noch eine Sache zur Nutzung von z-index: Dieser funktioniert nur bei positionierten Elementen (position: absolute;, position: relative; oder position: fixed)

Jo, stimmt

 

[siebling]

Genau das wollte ich vermeiden, weil manchmal nicht so performant funktioniert, d.h. der Background wird nicht immer direkt geladen bei MouseOver. Zumindest war so bisher meine vergangene Erfahrung gewesen.

Dann mach dich mal zum Thema "CSS Sprites" schlau, das deckt genau deinen Bedarf ab.

 

[raven16]

Dann mach dich mal zum Thema "CSS Sprites" schlau, das deckt genau deinen Bedarf ab.

Danke. Genau was ich gesucht habe. Probiere ich mal aus. Wusste halt vorher auch nicht, wonach ich suchen sollte Bei meiner Recherche kam auch nur quatsch heraus.

 

[Darrel]

Hier noch ein paar Dinge, die dir vielleicht ein wenig helfen:

Inline-CSS:

Wahrscheinlich war meine Frage nach dem inline-css missverständlich. Ich wollte nur fragen, wieso du die Hintergrundbilder via CSS in deine HTML-Datei einbindest. Wieso packst du das nicht einfach in deine CSS-Datei? CSS in HTML-Dateien hat meiner Meinung nach zu viele Nachteile (Stichworte: Trennung von Inhalt und Style, "specificity hieracy", maintainabilty" etc.)

Bootstrap:

Die Verwendung von Boostrap ist eigentlich kein Grund, um !important so häufig zu nutzen. Hast du deine Stylesheet-Datei auch nach der Bootstrap-Datei angegeben?

In etwa so:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="meinestyles.css">

Performance:

siebling hatte ja sprites bereits erwähnt.

Zudem gibt es auch die CSS-Filter-Eigenschaft, bei der du dann nur 1 Bild benötigst:

filter: grayscale([ <number> | <percentage> ])

Aber Achtung: Die Browserkompabilität ist hier ein Problem.

 

[raven16]

Jo, danke. Ich habe mich vllt. auch dazu verleiten lassen, important lieber einmal häufiger als nötig zu verwenden, weil ich es schon ab und zu mal gebraucht hatte, um eine Eigenschaft von Bootstrap zu hintergehen.

Ich habe es jetzt auch mit der sprites-Variante probiert und es funktioniert jetzt.