Was ich denke, dass Sie vorhatten, ist, die Verbindungen über dem Hintergrundbild zu positionieren. Also habe ich dieses kleine Beispiel vorbereitet.
Außerdem ist es eine gute Idee, eine Art visuelles Feedback hinzufügen, wenn der Benutzer die Symbole schwebt, dass er versteht, dass sie anklickbar sind :)
.background {
position: relative;
}
.links {
position: absolute;
list-style-type: none;
bottom: 30px;
left: 50px;
}
.links li {
display: inline;
}
a {
text-decoration: none;
}
a img {
padding: 0 15px;
}
a:hover img {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
}
<div class="background">
<img src="http://rockstartemplate.com/blogheaders/bannerdesign1.jpg">
<ul class="links">
<li>
<a href="www.twitter.com">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-48.png">
</a>
</li>
<li>
<a href="www.facebook.com">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-48.png">
</a>
</li>
<li>
<a href="www.youtube.com">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-48.png">
</a>
</li>
</ul>
</div>
nur den Code schreiben was auch immer Sie haben versucht – Alok
Fragen, die Code Hilfe suchen, müssen den kürzesten Code enthalten, der notwendig ist, um ihn ** in der Frage selbst zu reproduzieren ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/Einführung-Runnable-JavaScript-CSS-und-HTML-Code-Snippets /). Siehe [** So erstellen Sie ein minimales, vollständiges und überprüfbares Beispiel **] (http://stackoverflow.com/help/mcve) –