Rezebra-téma2

by Petr Haluza

HTML

<div class="card__container">

<a href="#" class="card service1">
<input type="radio" name="select-game" value="">
    <figure><img src="https://media-cdn.tripadvisor.com/media/attractions-splice-spp-674x446/0e/a5/9e/bb.jpg"></figure>
    <div class="card__head">Výřivka</div>
		<div class="card__cta">Rezervovat</div>
  </a>

<a href="#" class="card service2">
<input type="radio" name="select-game" value="">
    <figure><img src="https://grundresort.cz/slideadmin/upload_orig/21-55-Grund_07_64787e2d33eb3.jpg"></figure>
    <div class="card__head">Sauna</div>
		<div class="card__cta">Rezervovat</div>
  </a>

<a href="#" class="card service3">
<input type="radio" name="select-game" value="">
    <figure><img src="https://media.istockphoto.com/id/152141609/photo/solarium-treatment.jpg?s=612x612&w=0&k=20&c=bCusq7BH4z9MoJ8vA7psm3fPKVIfiRkKuWXuSjrp5m4="></figure>
    <div class="card__head">Solárium</div>
		<div class="card__cta">Rezervovat</div>
  </a>

<a href="#" class="card service4">
<input type="radio" name="select-game" value="">
    <figure><img src="https://static1.squarespace.com/static/656f4e4dababbd7c042c4946/657236350931ee4538eea52c/670d9c8ae63c9d76d27cca75/1729459400316/%28SE%29+therapeutic+massage-1x1.jpg?format=1500w"></figure>
    <div class="card__head">Masáž</div>
		<div class="card__cta">Rezervovat</div>
  </a>

</div>

CSS

:root {
	--body-bg: #fff;
}
* {
  box-sizing: border-box;
  font-family: arial;
}
.card__container { max-width: 1024px; margin: 2em auto; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
  transform: skew(5deg);}

.card__container .card { flex: 1; display: block;position: relative; overflow:hidden; height: 500px;
  transition: all 0.5s ease-in-out; will-change: transform;}
.card__container .card input { position: absolute; opacity: 0; z-index: -1;}
.card__container .card__head { padding: 20px 5px; transform: skew(-5deg); min-width: 100%; transition: all .3s ease-in-out;
  text-align: center; position: absolute; top: 0; left: 0;
  font-size: 20px; color: #123; text-transform: uppercase; 
}
.service1 .card__head:before {background: #dba1469e;}
.service2 .card__head:before {background: #fbe6bd9e;}
.service3 .card__head:before {background: #bdeffb9e;}
.service4 .card__head:before {background: #c3a99c9c;}
.card__container .card__head:before { position: absolute; content:"";
left:-5px; top:0; right:-5px; bottom:0; z-index:-1}

.card__container .card__cta { transform: skew(-5deg) translateX(-50%);  transition: all 0.5s;
  position: absolute; top: 50%; left: 50%; 
	background:#007fffad; font-size: 18px; color: white; padding: 12px 25px; border-radius:3px;
  opacity: 0; box-shadow: 0 10px 10px -10px black;
}
.card__container .card:hover { flex-grow: 5; box-shadow: 0 0 20px white; z-index: 2}
/*.card__container .card:hover .card__head { color:white}*/
.card__container .card:hover .card__cta { opacity: 1;}
.card__container .card__cta:hover {background:#007fffff}
.card__container img { width: 100%; height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out; transform-origin: 50% 50%}
	
figure { margin: 0; height: 100%; mask-image: linear-gradient(transparent, white, white, transparent); transition: all .3s ease-in-out; mask-size: 100% 100%; mask-position: center; 
}
.card:hover figure { mask-size: 200% 200%;}

.card__container:hover...

JavaScript

/*  jen demo */
$(document).ready(function() {
  $('.card').click(function() {
    // Odebere třídu 'checked' všem ostatním elementům .card
    $('.card').not(this).find('input[type="radio"]').prop('checked', false);
    // Přidá třídu 'checked' kliknutému elementu .card
    $(this).find('input[type="radio"]').prop('checked', true);
  });
});