.round-div problem

My problem is now that ive added a background image to the site the three featured items are a bit messed up. When the background was white, the white boxes for featured items were great because the thumbnail images where all that was visible, and when you hovered more would appear. But now w/ a background image that is no longer the case. please help?

Page URL blackbettyracingcrew.com
Here is all of the custom CSS im using right now:

body {
  background: url("http://www.lapedreranaturalstones.com/tiles/images/fantasy_white_hd.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.round-div {
  display: block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  width: 170px;
  height: 170px;
  z-index: 99;
  -webkit-border-radius: 60px;
  -moz-border-radius: 500px;
  border-radius: 900px;
  border: 104px solid #646464;
  border-image: #FAFAFA;
  opacity: 0.1;
  filter: alpha(opacity=10);
  top: -66px;
  left: -54px;
}