karta1

by Petr Haluza

HTML

<div class="card-container">

    <a class="card" href="#">
      <div class="img" style="background-image: url(https://download.asm.cz/inshop/prod/xtendlan/TELXTE1000.png)"></div>
        <h3>Multimedia</h3>
        <p>Dlouhatanskej popis kategirie Lorem ipsum dolor sit amet consectetur</p>
        <button>Více</button>
      </a>

  
    <a class="card" href="#">
      <div class="img" style="background-image: url(https://download.asm.cz/inshop/prod/xtendlan/DSC01247-Edit.jpg)"></div>
        <h3>Kamery</h3>
        <p>Lorem ipsum dolor sit amet consectetur</p>
        <button>Více</button>
      </a>


    <a class="card" href="#">
      <div class="img" style="background-image: url(https://download.asm.cz/inshop/prod/xtendlan/TELXTE1000.png)"></div>
        <h3>Kamery</h3>
        <p>Prostě kamery</p>
        <button>Více</button>
      </a>
  
    <a class="card" href="#">
      <div class="img" style="background-image: url(https://download.asm.cz/inshop/prod/xtendlan/DSC01247-Edit.jpg)"></div>
        <h3>Kamery</h3>
        <p>Lorem ipsum dolor sit amet consectetur</p>
        <button>Více</button>
      </a>
  
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap");
* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: "Poppins", sans-serif;}body {  display: flex;  justify-content: center;  align-items: center;  flex-wrap: wrap;  min-height: 100vh; background: white;}body 

.card-container {  display: flex; justify-content: center;  align-items: center;  flex-wrap: wrap; width: 100%; max-width: 1200px;  margin: 40px 0;}



.card { flex-basis: 300px;  box-shadow: 0 5px 20px -5px rgba(0, 0, 0, .3); padding: 20px; margin: 30px; transition: 0.35s;   
background: #f1f1f1; border-radius: 15px; 
display: flex; flex-direction: column;  align-items: center; align-self: stretch;
overflow: hidden; text-align: center; text-decoration: none; }

.card .img { width: calc(100% + 40px); margin: -20px -20px 20px; height:12em; background-position:center bottom; background-size:cover; filter: saturate(0.25);}
.card  h2 { position: absolute; top: -10px; right: 30px; font-size: 8rem; color: rgba(255, 255, 255, 0.1);}
.card  h3 {font-size: 1.8rem; color: #203040; z-index: 1; transition: 0.5s; margin-bottom: 15px;}
.card  p { flex: 1 0 auto; font-size: 1rem; font-weight: 300; color: #203040; z-index: 1; transition: 0.5s;}
.card  button { position: relative; display: inline-block;padding: 8px 20px; background:  linear-gradient(120deg, #343A4F, #0F1620); border:none; border-radius: 5px;  color: white; margin-top: 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); transition: 0.5s;}

.card:hover { transform: scale(1.05);}
.card:hover button { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); background-image: linear-gradient(176deg, #3D9DEA, #4A4EEE); cursor:pointer}
.card:hover .img {filter: saturate(1);}