How to code a row of three image-links?

Hello,

I’ve been trying to work things out but as a newbie and I’ve just hit the wall where my brain refuses to work out the problems.. so… hello helpers ??

The website I’m working on is:
https://51stokescroft.com.gridhosted.co.uk/

In my Home page, I want to have only a row of three large-ish images (adjusting with the screen size) in line- each of them a link to bar, restaurant & party bookings pages.
I wrote the code below, and css pasted in below the code, but it doesn’t seem to work..

<div id="home-links" class="homelinks">
	<a class="Restaurant" href="https://51stokescroft.com.gridhosted.co.uk/Restaurant">Restaurant</a>
  	<a class="Bar" href="https://51stokescroft.com.gridhosted.co.uk/bar">Bar</a>
  	<a class="Party-Bookings" href="https://51stokescroft.com.gridhosted.co.uk/Party-Bookings/">Party Bookings</a>
</div>

#home-links {
display: inline;
float: left;
margin-top: 5em;
margin-left: 20%;
margin-right: 20%;
margin-bottom: auto;
}

.Restaurant {
width: 320px;
height: 220px;
padding-right: 5%;
background-image: url(https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/restaurant.jpg);
}

.Bar {
width: 320px;
height: 220px;
padding-right: 5%;
background-image: url(https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/bar11.jpg);
}

.Party-Bookings {
width: 320px;
height: 220px;
padding-right: 0%;
background-image: url(https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/party.jpg);
}

Before this I tried writing a code for a ul instead of the code above-

<div id="home-links" class="homelinks">
       <ul id="menu-images">
      <li class="Bar"><a href="https://51stokescroft.com.gridhosted.co.uk/bar"><img src="https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/bar11.jpg" alt="Bar" height="220" width="320"></a>
       <li class="Restaurant"><a href="https://51stokescroft.com.gridhosted.co.uk/Restaurant/"><img src="https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/restaurant.jpg" alt="Restaurant" height="220" width="320"></a>

      <li class="Party-Bookings"><a href="https://51stokescroft.com.gridhosted.co.uk/Party-Bookings/"><img src="https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/party.jpg" alt="Party Bookings" height="220" width="320"></a>
    </ul>
</div>

And styled css accordingly, but was having trouble to get a hover image on top of the link image so tried to do it differently, but still having problems…

And I’m working on twenty eleven theme..

Would really appreciate your help!

Thanks,
Dom