<div id="btiles" style="opacity: 1;">  <!—tiles container -->
<!—tile 1-->
<a class="bv-tile" href="https://www.my.blog /link-1" title="Filed-1">
   <!—title 1-->
  <div class="bv-title" >Filed-1</div>
  <!—image 1-->
  <div class="bv-thumb"><img title=" Filed-1-img" src="https://www. my.blog /wp-content/uploads/field-1.png"></div>
</a>
  <!—tile 2-->
 <a class="bv-tile" href=" https://www.my.blog /link-2 /" title=" Filed-2 ">
  <div class="bv-title"> Filed-2 </div>
  <div class="bv-thumb"><img title=" Filed-2-img" src=" https://www. my.blog /wp-content/uploads/field-2.png "></div>
</a>
<!—tile 3-->
<!—tile 4-->
<!—tile 5-->
<!—tile 6-->
</div>  <!—end of btiles -->

#btiles {
margin: 5px 1px;
padding: 2px;
}

#btiles a{
margin: 10px auto;
padding 0;
display: inline-block;
text-decoration: none;
width: 32%;         /* 3 tiles in one row and some space around */
max-width: 200px;   /* photos are 250px x 250px */
}
@media (max-width: 480px) {
#btiles a {width: 50%; min-width: 150px;  }     /* 2 tiles in one row and some space around - photos are 250px x 250px */
}
#btiles img {
margin:0;
padding:0;
max-width: 100%;
height: auto;
}

.bv-tile, .bv-empty-tile {
box-sizing: border-box;
background: transparent;
border: 1px solid #e1e8ed;
border-radius: 6px;
z-index:10;
width: 100%;
text-align:center;
vertical-align: center;
}
.bv-title {
background: grey;
height: 30px;
overflow: elipis;
margin: 0;
padding: 5px auto;
width: 100%;
vertical-align: center;
color: #002268;
font-family: Open Sans Condensed;
font-size: 16px;
font-style: normal;
font-weight: 700;
letter-spacing: 2px;
font-variant: small-caps;
}
.bv-thumb {
background: white;
margin: 0;
border-radius: 0 0 6px 6px;
cursor: pointer;
display: block;
overflow: hidden;
width: 100%;
height: auto;
}
#btiles img {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='old-timey'><feColorMatrix type='matrix' values='0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0'/></filter></svg>#old-timey");
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
#btiles img:hover {
filter: none;
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
}