-
İmage Hover Accordion HTML & CSS
İmage Hover Accordion
kodu ekliyorum çalışmaz yada canlısını görmeniz için ayrıca linkte ekliyorum,
Örnek: https://barcag.com/image-hover-accordion
HTML KOD:
<div class="barcag">
<div style="background-image: url('image-url');"></div>
<div style="background-image: url('image-url');"></div>
<div style="background-image: url('image-url');"></div>
<div style="background-image: url('image-url');"></div>
<div style="background-image: url('image-url');"></div>
</div>
CSS KOD:
<style>.barcag {
display: flex;
height: 20rem;
align-content: center;
gap: 10px
}
.barcag > div {
flex: 1;
border-radius: 1rem;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
transition: all .8s cubic-bezier(.25, .4, .45, 1.4);
}
.barcag > div:hover {
flex: 2.5;
border-radius: 1rem;
}
.barcag:hover> :not(:hover) {
opacity: .4;
}</style>
Üzgünüz, yanıt bulunamadı.
Log in to reply.