Demo:
HTML:
<div class="shop-make row my-3">
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=Acura" aria-label="Acura">
<img src="/images/BrandLogos/acura.png" class="img-fluid mx-auto d-block" alt="Acura" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=audi" aria-label="audi">
<img src="/images/BrandLogos/audi.png" class="img-fluid mx-auto d-block" alt="audi" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="used-bmw?clearall=1&MakeName=BMW" aria-label="BMW">
<img src="/images/BrandLogos/bmw.png" class="img-fluid mx-auto d-block" alt="BMW" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=buick" aria-label="buick">
<img src="/images/BrandLogos/buick.png" class="img-fluid mx-auto d-block" alt="buick" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=cadillac" aria-label="cadillac">
<img src="/images/BrandLogos/cadillac.png" class="img-fluid mx-auto d-block" alt="cadillac" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=Chevrolet" aria-label="Chevrolet">
<img src="/images/BrandLogos/chevrolet.png" class="img-fluid mx-auto d-block" alt="Chevrolet" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=chrysler" aria-label="chrysler">
<img src="/images/BrandLogos/chrysler.png" class="img-fluid mx-auto d-block" alt="chrysler" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=dodge" aria-label="dodge">
<img src="/images/BrandLogos/dodge.png" class="img-fluid mx-auto d-block" alt="dodge" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=ford" aria-label="ford">
<img src="/images/BrandLogos/ford.png" class="img-fluid mx-auto d-block" alt="ford" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=gmc" aria-label="gmc">
<img src="/images/BrandLogos/gmc.png" class="img-fluid mx-auto d-block" alt="gmc" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=honda" aria-label="honda">
<img src="/images/BrandLogos/honda.png" class="img-fluid mx-auto d-block" alt="honda" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=hyundai" aria-label="hyundai">
<img src="/images/BrandLogos/hyundai.png" class="img-fluid mx-auto d-block" alt="hyundai" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=infiniti" aria-label="infiniti">
<img src="/images/BrandLogos/infiniti.png" class="img-fluid mx-auto d-block" alt="infiniti" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=isuzu" aria-label="isuzu">
<img src="/images/BrandLogos/isuzu.png" class="img-fluid mx-auto d-block" alt="isuzu" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=jaguar" aria-label="jaguar">
<img src="/images/BrandLogos/jaguar.png" class="img-fluid mx-auto d-block" alt="jaguar" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=jeep" aria-label="jeep">
<img src="/images/BrandLogos/jeep.png" class="img-fluid mx-auto d-block" alt="jeep" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=kia" aria-label="kia">
<img src="/images/BrandLogos/kia.png" class="img-fluid mx-auto d-block" alt="kia" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=land%20rover" aria-label="land-rover">
<img src="/images/BrandLogos/land-rover.png" class="img-fluid mx-auto d-block" alt="land-rover" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=lexus" aria-label="lexus">
<img src="/images/BrandLogos/lexus.png" class="img-fluid mx-auto d-block" alt="lexus" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=lincoln" aria-label="lincoln">
<img src="/images/BrandLogos/lincoln.png" class="img-fluid mx-auto d-block" alt="lincoln" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=maserati" aria-label="maserati">
<img src="/images/BrandLogos/maserati.png" class="img-fluid mx-auto d-block" alt="maserati" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=mazda" aria-label="mazda">
<img src="/images/BrandLogos/mazda.png" class="img-fluid mx-auto d-block" alt="mazda" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=mercedes-benz" aria-label="mercedes-benz">
<img src="/images/BrandLogos/mercedes.png" class="img-fluid mx-auto d-block" alt="mercedes-benz" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=mini" aria-label="mini">
<img src="/images/BrandLogos/mini.png" class="img-fluid mx-auto d-block" alt="mini" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=mitsubishi" aria-label="mitsubishi">
<img src="/images/BrandLogos/mitsubishi.png" class="img-fluid mx-auto d-block" alt="mitsubishi" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=nissan" aria-label="nissan">
<img src="/images/BrandLogos/nissan.png" class="img-fluid mx-auto d-block" alt="nissan" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=oldsmobile" aria-label="oldsmobile">
<img src="/images/BrandLogos/oldsmobile.png" class="img-fluid mx-auto d-block" alt="oldsmobile" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=pontiac" aria-label="pontiac">
<img src="/images/BrandLogos/pontiac.png" class="img-fluid mx-auto d-block" alt="pontiac" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=ram" aria-label="ram">
<img src="/images/BrandLogos/ram.png" class="img-fluid mx-auto d-block" alt="ram" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=saab" aria-label="saab">
<img src="/images/BrandLogos/saab.png" class="img-fluid mx-auto d-block" alt="saab" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=saturn" aria-label="saturn">
<img src="/images/BrandLogos/saturn.png" class="img-fluid mx-auto d-block" alt="saturn" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=subaru" aria-label="subaru">
<img src="/images/BrandLogos/subaru.png" class="img-fluid mx-auto d-block" alt="subaru" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=suzuki" aria-label="suzuki">
<img src="/images/BrandLogos/suzuki.png" class="img-fluid mx-auto d-block" alt="suzuki" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=toyota" aria-label="toyota">
<img src="/images/BrandLogos/toyota.png" class="img-fluid mx-auto d-block" alt="toyota" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=volkswagen" aria-label="volkswagen">
<img src="/images/BrandLogos/volkswagen.png" class="img-fluid mx-auto d-block" alt="volkswagen" />
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
<a class="img-thumbnail" href="newandusedcars?clearall=1&MakeName=volvo" aria-label="volvo">
<img src="/images/BrandLogos/volvo.png" class="img-fluid mx-auto d-block" alt="volvo" />
</a>
</div>
</div>
SCSS Extend:
.shop-make {
a {
@include boxShadow;
display: flex;
align-items: center;
height: 100%;
opacity: 0.75;
transition: all 0.3s ease;
background-color: rgba(#fff, 0.9);
@include hover-focus {
@include boxShadowHover;
opacity: 1;
}
}
}