İmage Hover Accordion

HTML Kodu

				
					<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 Kodu

				
					<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>