Ausrichtung von Transparenten Symbolen mit Hover Effekt

Eisbergsalat · 20 Dezember 2014

Hi,
ich hab ein Problem mit zwei Symbolen die ich nachbauen wollte. Ich habe die Logos Freigestellt, die Transparenz ist auch OK denk ich.
Sie sind verzogen. Ich bekomm die Schrift einfach nicht in die Mitte. Kann mir jemand sagen wo der Fehler liegt?

Quelltext

HTML:

                  <div class="iTunes">
                  <a href="https://itunes.apple.com/de/album/keine-wie-du-single/id911059203" target="itunes_store">
                  <img alt="" src="images/iTunes.png" />
                  </a></div>
                  <div class="amazon">
                  <a href="http://www.amazon.de/Keine-wie-Du-Wolf/dp/B00MYFSSH6" target="amazon_store"><img alt=""
                  src="images/amazon.png" />
                  </a></div>
                  <div class="Google">
                  <a href="https://play.google.com/store/music/album/Wolf_Keine_wie_Du?id=Bzckx6tvmuvh7mxckw5yz5pz26e"
                  target="google_play_store"><img alt="" src="images/google_play.png" />
                  </a></div>

CSS

Code:

.iTunes {
    background-color: #737373;
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
     border-radius: 5px;
     float: left;
}
.iTunes:hover {
    background-color: #151515;
}
.iTunes_small {
    background-color: #737373;
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
    height: 35%;
    width: 100px;
    border-radius: 5px;
    float: left;
}
.iTunes_small:hover {
    background-color: #151515;
}

.amazon {
    background-color: #FFFFFF;
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
     height: 50%;
     width: 200px;
     border-radius: 5px;
     float: left;
}
.amazon:hover {
    background-color: #DBDADA;
}
.amazon_small {
    background-color: #FFFFFF;
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
    height: 35%;
    width: 100px;
    border-radius: 5px;
    float: left;
}
.amazon_small:hover {
    background-color: #DBDADA;
}

.Google {
    background-color: #737373;
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
     height: 70%;
     width: 200px;
     border-radius: 5px;
     float: left;
}
.Google:hover {
    background-color: #151515;
}

Die Symbole sollen nebeneinander (sind sie) auf einer horizontalen Linie liegen und alle gleich hoch sein.

Danke für eure Hilfe

PPPPPSSSSS: ERLEDIGT

djheke · 21 Dezember 2014

versuch es mal so

HTML:

<!doctype html>
<html>
<head>
<title>Wölfe der Nacht</title>
<meta charset="UTF-8">

<style>

#wrapper {
 background:#aaa;
}
.iTunes  {
display:inline-block;
vertical-align:middle;
  width: 100px;
}
.amazon {
display:inline-block;
vertical-align:middle;
  width: 200px;
}
.Google {
display:inline-block;
vertical-align:middle;
  width: 200px;
}

#wrapper .iTunes img {
 width:100px;
}

#wrapper .amazon img {
 width:150px;
}

#wrapper .Google img {
 width:200px;
}
</style>
</head>
<body>
<div id="wrapper">
  <div class="iTunes">
  <a href="https://itunes.apple.com/de/album/keine-wie-du-single/id911059203" target="itunes_store">
  <img alt="" src="mages/iTunes.png" />
  </a>
</div>
  <div class="amazon">
  <a href="http://www.amazon.de/Keine-wie-Du-Wolf/dp/B00MYFSSH6" target="amazon_store"><img alt=""
  src="images/amazon.png" />
  </a>
</div>
  <div class="Google">
  <a href="https://play.google.com/store/music/album/Wolf_Keine_wie_Du?id=Bzckx6tvmuvh7mxckw5yz5pz26e"
  target="google_play_store"><img alt="" src="images/google_play.png" />
  </a>
</div>

</div>
</body>
</html>

Ausrichtung von Transparenten Symbolen mit Hover Effekt

Eisbergsalat

Neues Mitglied

djheke

Aktives Mitglied

Neueste Beiträge