css horizontal accordions
CSS
Design
Html kdok
Html kdok2
<div class="container">
<div class="box">
<img src="https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1662718237.jpg">
<span>CSS</span>
</div>
<div class="box">
<img src="https://virgonc.gportal.hu/portal/virgonc/image/gallery/1662719667.jpg">
<span>Design</span>
</div>
<div class="box">
<img src="https://virag1.gportal.hu/portal/virag1/image/gallery/1662724762.jpg">
<span>Html kdok</span>
</div>
<div class="box">
<img src="https://virgoncdesign.gportal.hu/portal/virgoncdesign/image/gallery/1649863573.jpg">
<span>Html kdok2</span>
</div>
</div>
<style>.container {
display: flex;
width: 100%;
padding: 4% 2%;
box-sizing: border-box;
height: 100vh;
}
.box {
flex: 1;
overflow: hidden;
transition: .5s;
margin: 0 2%;
box-shadow: 0 20px 30px rgba(0,0,0,.1);
line-height: 0;
}
.box > img {
width: 200%;
height: calc(100% - 10vh);
object-fit: cover;
transition: .5s;
}
.box > span {
font-size: 3.8vh;
display: block;
text-align: center;
height: 10vh;
line-height: 2.6;
}
.box:hover { flex: 1 1 50%; }
.box:hover > img {
width: 100%;
height: 100%;
}
</style>
AJÁNLOM AZ OLDALT
Sg
Archvum
ARCHVUM
