logo

Image selector with reflection

Lien d’origine: https://codepen.io/Paul2512C/pen/zYYpBRZ

HTML:

<section class="imgSelectorReflection">
<div class="images-selector">
<input type="radio" id="duck" name="image" value="duck">
<label for="duck" class="img-card img1"></label>
<input type="radio" id="dog" name="image" value="dog">
<label for="dog" class="img-card img2"></label>
<input type="radio" id="cat" name="image" value="cat">
<label for="cat" class="img-card img3"></label>
<input type="radio" id="cow" name="image" value="cow">
<label for="cow" class="img-card img4"></label>
</div>
</section>

CSS:

.imgSelectorReflection {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
width: 100%;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #F5F5F5;
}
.imgSelectorReflection .images-selector input {
position: absolute;
z-index: 10;
}
.imgSelectorReflection .images-selector input:checked + .img-card {
filter: none;
transform: scaleY(1);
}
.imgSelectorReflection .img-card {
display: inline-block;
width: 250px;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
transition: all 200ms ease-in;
filter: grayscale(1) opacity(.8);
}
.imgSelectorReflection .img-card:hover {
filter: grayscale(0) opacity(1);
/* box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.3),
0px 10px 2px rgba(0, 0, 0, 0.1); */
}
.imgSelectorReflection .img-card::before,
.imgSelectorReflection .img-card::after {
transform: scaleY(-1);
}
/*reflection*/
.imgSelectorReflection .img-card:hover::after {
content: '';
background-image: inherit;
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
width: inherit;
height: 40%;
position: absolute;
bottom: -25%;
}
/*fade reflection*/
.imgSelectorReflection .img-card:hover::before {
content: '';
width: inherit;
height: 42%;
position: absolute;
bottom: -25%;
background: linear-gradient(to bottom, rgba(255, 255, 255, .9),rgba(255, 255, 255, .5));
z-index: 1;
}
.imgSelectorReflection .img1 {
background-image: url(https://images.unsplash.com/photo-1442689859438-97407280183f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.imgSelectorReflection .img2 {
background-image: url(https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.imgSelectorReflection .img3 {
background-image: url(https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.imgSelectorReflection .img4 {
background-image: url(https://images.unsplash.com/photo-1549488235-42996ae3b650?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}