Hustočekboxy filtr

by Petr Haluza

HTML

<div class="sellerGrid">
  <a class="seller"><div><img src="https://img4.cz/redaction/rollei/shops/10900.png"/></div><header>www.alza.cz</header></a>
  <a class="seller"><div><img src="https://img4.cz/redaction/rollei/shops/62742.png"/></div><header>www.alza.cz</header></a>
  <a class="seller"><div><img src="https://img4.cz/redaction/rollei/shops/5425.png"/></div><header>www.alza.cz</header></a>
  <a class="seller"><div><img src="https://img4.cz/redaction/rollei/shops/24621.png"/></div><header>www.alza.cz</header></a>
  <a class="seller"><div><img src="https://img4.cz/redaction/rollei/shops/10900.png"/></div><header>www.alza.cz</header></a>
  <a class="seller"><div><img src="https://img4.cz/redaction/rollei/shops/62742.png"/></div><header>www.alza.cz</header></a>
  <a class="seller"><div><img src="https://img4.cz/redaction/rollei/shops/5425.png"/></div><header>www.alza.cz</header></a>
<div><!-- /sellerGrid -->

CSS

.sellerGrid { display: flex; flex-wrap: wrap; gap: 15px; width:100%}
a.seller { flex-basis: 220px; display: flex; flex-direction:column;  overflow: hidden; position: relative; cursor: pointer; 
border-radius: 10px; padding: 10px; background: linear-gradient(176deg, #3D9DEA, #4A4EEE); color:white;}

a.seller div { flex-grow: 1; width: 100%; padding: 10px 22px 5px; background: white; border-radius: 8px 8px 0 0;}
a.seller img {  width: 100%; -o-object-fit: cover;  object-fit: cover; }
a.seller header { font-weight: 300; font-size: 1em; text-align: center; padding: 1em .5em .5em}
a.seller:hover {background: white;  color:#3D9DEA; box-shadow: 0 0 0 2px #3D9DEA}





html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: "Inter", Arial;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  color: #000;
}