Removing that annoying white background from thumbnails in Bootstrap 3

Question

I have created small piece of code where it shows 4 thumbnails in a row of equal grid width.

.row-content-3 {
    background-color: rgba(0,0,0,0.8) !important;
    color: #fff;
    margin:0px auto;
    padding: 50px 0px 50px 0px;
    min-height:200px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-content-3">
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <div class="thumbnail">
               <a href="#">
                 <img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa's fair"> 
               </a>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <div class="thumbnail">
               <a href="#">
                 <img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa's fair"> 
               </a>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <div class="thumbnail">
               <a href="#">
                 <img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa's fair"> 
               </a>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <div class="thumbnail">
               <a href="#">
                 <img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa's fair"> 
               </a>
            </div>
        </div>   
 </div>

If you run the code,you will notice that there is a white background which needs to be removed. I put this css simple code,but it didn't work:(.

.thumbnail {
  border: 0;
}

Also I am giving you the jsfiddle.

Any ideas,

Thanks Theo.

Answer 1

If i am not wrong then you wanted to remove the white background from the circle image back only.

I Added this

.thumbnail {
  border: 0;
  background: transparent;
}

And you can see there is box shadow too. You can remove that by using

box-shadow: none;

Updated fiddle: https://jsfiddle.net/udgw71no/6/