在CSS / HTML中将图像作为背景的自适应马赛克-需要边框和捕获文本

Question

I have created a responsive mosaic of images (as div backgrounds). The problem is that I can not add borders and caption texts. In the foto below you can see the actual result and desired result.

Jsfiddle

I need borders:

#foto1 - border-right:2px solid #fff;

#foto2 - border-bottom:2px solid #fff;

I add borders to #foto1 and #foto3 but they don' t appear.

Containers .caption should contain caption text. When I enter some text, the container changes it's height. I need it to stay the same height..

HTML

<div class="table">
<div class="tablerow">

<div class="tablecell">

<a href="#">
<div id="foto1" style="padding-top:100%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c33/768d432/none/11314/UVTR/image_content_3669106_20180619165415.jpg) center no-repeat;background-size:auto, cover;"> 
<div class="caption">
</div>
</div>
</a>

</div>
<div class="tablecell">

<a href="#">
<div id="foto2" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c0/768d432/none/11314/VMNM/180731ftv-carretera-corralejo-8melian_3847760_20180804162359.jpg) center no-repeat;background-size:auto, cover;">
<div class="caption">
</div>
</div>
</a>

<a href="#">
<div id="foto3" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x512/0c40/768d432/none/11314/TKDX/papas-diez-tipos_3850905_20180807065646.jpg) center no-repeat;background-size:auto, cover;"> 
<div class="caption">
</div>
</div>
</a>
</div>

</div></div>

CSS

.table{display:table;width:70%;}
.tablerow{display:table-row;}
.tablecell{display:table-cell;width:50%;vertical-align:top;}

Answer 1

write some CSS

 .table { display:table; width:70%; } .tablerow { display:table-row; } .tablecell { display:table-cell; width:50%; vertical-align:top; } .tablecell a div:not (.caption) { position:relative; } .caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); background: rgba(255,255,255,0.7); padding: 5px; color: #000; border-radius: 2px; line-height: 1.2; } #foto1 { border-right:2px solid #fff; } #foto2 { border-bottom:2px solid #fff; } 

 <div class="table"> <div class="tablerow"> <div class="tablecell"> <a href="#"> <div id="foto1" style="padding-top:100%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c33/768d432/none/11314/UVTR/image_content_3669106_20180619165415.jpg) center no-repeat;background-size:auto, cover;"> <div class="caption">caption Text</div> </div> </a> </div> <div class="tablecell"> <a href="#"> <div id="foto2" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c0/768d432/none/11314/VMNM/180731ftv-carretera-corralejo-8melian_3847760_20180804162359.jpg) center no-repeat;background-size:auto, cover;"> <div class="caption">caption Text</div> </div> </a> <a href="#"> <div id="foto3" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x512/0c40/768d432/none/11314/TKDX/papas-diez-tipos_3850905_20180807065646.jpg) center no-repeat;background-size:auto, cover;"> <div class="caption">caption Text</div> </div> </a> </div> </div> </div> 

https://jsfiddle.net/c2a4zh38/39/