Невозможно сделать белый фон в контейнере изображений

Question

Мне нужна помощь, чтобы сделать белый цвет внутри границы вместе с черным описанием.

Фактический сценарий находится здесь: http://buyersstop.blogspot.in/2016/01/motoe.html

Моя проблема заключается в том, что если я подаю белый цвет фона черная граница показывает вокруг изображения.

div.img1 { 
 
    border: 1px solid #777; 
 
} 
 
div.img1:hover { 
 
    border: 1px solid #ccc; 
 
} 
 
div.img1 img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.responsive { 
 
    padding: 6px 6px; 
 
    float: left; 
 
    width: 32.99999%; 
 
} 
 
@media only screen and (max-width: 700px) { 
 
    .responsive { 
 
    width: 49.99999%; 
 
    margin: 6px 0; 
 
    } 
 
}

<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div>

Answer 1

.post-body img { 
padding: 8px; 
background: #FFF none repeat scroll 0% 0%; 
border: 1px solid transparent; 
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2); 
border-radius: 0px; 
} 

div.desc { 
padding: 15px; 
text-align: center; 
background-color: #FFF; 
color: #000; 
} 

Это должно заботиться о нем.

Answer 2

Я сделал некоторые изменения на ваши коды увидеть мои коды обновления. Надеюсь так же, как вы ожидали.

div.img1 { 
 
    border: 1px solid #777; 
 
} 
 
div.img1:hover { 
 
    border: 1px solid #ccc; 
 
} 
 
div.img1 img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
    position: absolute; 
 
    bottom: 7px; 
 
    color: #fff; 
 
    left: 6px; 
 
    width: 96%; 
 
    background-color: rgba(10,10,10,0.5); 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.responsive { 
 
    padding: 6px 6px; 
 
    float: left; 
 
    width: 32.99999%; 
 
    position:relative; 
 
    background-color:#fff; 
 
} 
 
@media only screen and (max-width: 700px) { 
 
    .responsive { 
 
    width: 49.99999%; 
 
    margin: 6px 0; 
 
    } 
 
}

<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div>