Issues with Image + Rollover Fade when Hovering

Question

attached: screenshot

Hi everyone, so I'm having some difficulty getting an image + rollover effect to work. (I'm new to coding) What I am trying to do:

I want the image to fit within the hover 'box' (shown with opacity), which has a height and width of 100%. The image is also supposed to be 280px x 280px, but appears larger than that and is also tiling or repeating within it's alloted space? Can anyone see what I might be doing incorrectly?

PS - There are 2 other 'featured works' that will appear beside the one you see above, and will be in the same format as the first one...hence the repeating paragraph and image tags below. These images are supposed to act as an entire link once they are hovered over, but so far, this action seems only to apply to the text: Vital Voices | Campaign... (please see screenshot)

I'm more concerned about the images aligning to the hover / overlay, though.

Here's the CSS:

img {
margin-top: 5px;
padding: 10px;
float: left;    
}

.picture {
width: 280px;
height: 280px;
background: url(".png");
padding: 20px;
float: left;
}


.overlay {
width: 100%;
height: 100%;
background: url("../images/opacity.png");
display: none;
padding: 10px;
text-align: center;
font-weight: bold;
font-family: Baskerville;
font-size: 20px;
}

.picture:hover .overlay {
display: block;
}

.clearfloat {
clear: both;    
}

Here's the HTML:

<div id="wrapper">

<h1>Featured Works</h1>

<p><a href="branding.html" src="images/VV_2.png"><div class="picture" style="width: 280px; height: 280px; background: url('images/VV_2.png');"><div class="overlay">Vital Voices | Campaign</div></div></a></p>

<p><a href="typography.html" src=""><div class="picture" style="width: 280px; height: 280px; background: url('#');"><div class="overlay">Quote Poster | Typography</div></div></a></p>

<p><a href="marketing.html" src=""><div class="picture" style="width: 280px; height: 280px; background: url('#');"><div class="overlay">Coffee | Marketing</div></div></a></p>

<div class="clearfloat"></div> 

</div> <!--closes wrapper div-->

-----------------update:

<p><a href="branding.html"><img src="images/VV_2.png" width="280px" height="280px" alt="vital voices preview image" class="preview"></a></p><div class="overlay">Vital Voices | Campaign</div>

^ changing the html code to something like this...and the CSS to this: (changed picture to preview, kept overlay info the same)

.preview {
width: 280px;
height: 280px;
padding: 20px;
float: left;
}

.preview:hover .overlay {
display: block;
}

...fixed the image positioning / size, but now the overlay doesn't take effect. see: screenshot2

attached: screenshot2

Answer 1

A background image will repeat itself by default if the image is smaller than the available place. To change this you can use the background-repeat property and set it to no-repeat. The background will then start in the top left corner without repeating itself. To get the background into the center then, you would have to use the background-position property and set its value to center.

I'll give a general example of how to achieve the described effect:

.work a {
  position: relative;
  float: left;
  margin-right: 20px;
  width: 180px;
  height: 180px;
}

.work .title {
  display: none;
  position: absolute;
  width: 100%;
  padding: 5px 0;
  margin-top: 15px;
  text-align: center;
  background: rgba(255,255,255,0.5);
}

.work:hover .title {
  display: block;
}

<h1>Featured Works</h1>

<div class="work">
  <a href="#">
    <span class="title">Vital Voices | Campaign</span>
    <img src="http://lorempixel.com/180/180/abstract/3/">
  </a>
</div>

<div class="work">
  <a href="#">
    <span class="title">Quote Poster | Typography</span>
    <img src="http://lorempixel.com/180/180/abstract/4/">
  </a>
</div>

A small tip: avoid using inline CSS (= CSS in style property of your HTML) as long as it is not required. This will allow you to achieve better maintainability. Feel free to ask if something is unclear.