I am seeking advice on how to position three social media icons on top of each picture, aligned to the left but in line with the image. Below is the code snippet I have been working on:
body {
background-color: #1a1a1a;
}
#downloadbutton{
width:127px;
height:48px;
text-align: center;
/* text-indent:-9999px; */
border:none;
margin-top:20px;
cursor:pointer;
}
#downloadbuttonhover:hover{
color:#fff;
background-color: #b40000;
opacity:0.9;
}
.buttonDownload{
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #b30000;
color: white;
font-family: 'Oswald', sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #b30000;
}
.buttonDownload:hover:after {
border-top-color: #b30000;
animation-play-state: running;
}
.clearfix {
clear: both;
}
.divWithBtn {
display: inline-block;
}
.divWithBtn a{
display: block;
margin: 0 auto;
}<div class="container">
</br>
<span class="textformat1"><center><b>Albums</b></span></center>
</br>
<div id="sharebar">
<a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="www.tekmillion.com" data-text="TekMillion - Download Albums http://www.tekmillion.com/albums.html" data-via="tekmill">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<hr>
<div class="fb-share-button" data-href="http://www.tekmillion.com/albums.html" data-layout="button_count"></div>
</div>
<script>var switchTo5x=true;</script>
<script src="//w.sharethis.com/button/buttons.js"></script>
<center>
<div class="clear">
<div class="divWithBtn">
<img src="socialmedia/twitterwhiteandblack.png" alt="twitterwhiteandblack" width="30" height="30">
<img src="socialmedia/googlepluswhiteandblack.png" alt="googlepluswhiteandblack" width="30" height="30">
<img src="socialmedia/facebookwhiteandblack.png" alt="facebookwhiteandblack" width="30" height="30">
<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" width="200" height="200">
<a href="LONDON%202%20TURKEY%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER)" width="200" height="200" border:none;>
<a href="LONDON%202%20TURKEY%20VOL.2.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="LOVE%20%26%20HATE%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="GURBET%20ELI%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
</div>
</center>
</br>
</div>To view and interact with the album images and links, please visit:
Your assistance is greatly appreciated.