<div style="width:50%;max-width:777px;padding:5%;"> <a href="#mykneegrows" class="blockbtn"> <figure style="background-image:url(http://3kandy.com/albums/bmw-and-friends/taking-pictures-while-driving/deleware-memorial-bridge-jan2001.jpg);"> <img src="http://dev.2xd.us/library/img/3x3.gif" /><figcaption>... Or be square <b>3x3</b></figcaption> </figure> </a> <a href="#mykneegrows" class="blockbtn"> <figure style="background-image:url(http://3kandy.com/albums/bmw-and-friends/taking-pictures-while-driving/leave-it-in-gear.jpg);"> <img src="http://dev.2xd.us/library/img/15x7.gif" /><figcaption>My Home: Earth <b>15x7</b></figcaption> </figure> </a> <a href="#mykneegrows" class="blockbtn"> <figure style="background-image:url(http://3kandy.com/albums/bmw-and-friends/taking-pictures-while-driving/downtown-g37x.jpg);"> <img src="http://dev.2xd.us/library/img/7x4.gif" /><figcaption>71 Sümher Sträßë <b>7x4</b></figcaption> </figure> </a> <a href="#mykneegrows" class="blockbtn"> <figure style="background-image:url(http://3kandy.com/albums/bmw-and-friends/taking-pictures-while-driving/benz-E500.jpg);"> <img src="http://dev.2xd.us/library/img/7x3.gif" /><figcaption>Benzin Signal Timelapse <b>7x3</b></figcaption> </figure> </a> <a href="#mykneegrows" class="blockbtn"> <figure style="background-image:url(http://3kandy.com/albums/bmw-and-friends/taking-pictures-while-driving/mazda6.jpg);"> <img src="http://dev.2xd.us/library/img/4x3.gif" /><figcaption>Teh 95 freeway in teh Mazda 6 <b>4x3</b></figcaption> </figure> </a> </div> <div style="width:77%;max-width:1111px;padding:5% 0 0 2%;"> <a href="#mykneegrows" class="blockbtn"> <figure style="background-image:url(http://erik.mobi/albums/e/volvo_3HAT.jpg);"> <img src="data:image/gif;base64,R0lGODlhBAADAIAAAP///wAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NkYyMEI2NUMyODkxMUUzOUMzMkUyRTg1OTczMUUzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NkYyMEI2NkMyODkxMUUzOUMzMkUyRTg1OTczMUUzOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk2RjIwQjYzQzI4OTExRTM5QzMyRTJFODU5NzMxRTM4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk2RjIwQjY0QzI4OTExRTM5QzMyRTJFODU5NzMxRTM4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAAAsAAAAAAQAAwAAAgOEj1YAOw==" /><figcaption>FigNewtons stüchen meinen t00then</figcaption> </figure> </a> </div>
body { background:#777 } .blockbtn{ position:relative; display:block; padding:8px;margin:8px 0 24px 0; background:#fff;color:#7b5b50; box-shadow: 3px 4px 12px 3px rgba(2,3,3,0.77); } .blockbtn>figure{ position:relative; display:block; padding:0; margin:0; background-color:#aaa; background-position:center center; background-repeat: no-repeat; background-size:cover; box-shadow:inset 0 0 3px 1px #fff; } .blockbtn>figure>img{ position:relative; display:block; width:100%; height:auto; } .blockbtn>figure>figcaption{ position:absolute; display:block; left:0px; right:0px; bottom:0px; background:rgba(255, 255, 255, 0.77); padding:12px 3px; line-height:18px;text-align:center; }