Image View Slide

Posted on : 14th May 2022 | Author : @ByDev24


						<div class="image-slides">
	<div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
		<img src="https://code.bydev24.com/uploads/code-snippts/thumb1.jpg">
	</div>
	<div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
		<img src="https://code.bydev24.com/uploads/code-snippts/thumb2.jpg">
	</div>
	<div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
		<img src="https://code.bydev24.com/uploads/code-snippts/thumb3.jpg">
	</div>
	<div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
		<img src="https://code.bydev24.com/uploads/code-snippts/thumb4.jpg">
	</div>
	<div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
		<img src="https://code.bydev24.com/uploads/code-snippts/thumb5.jpg">
	</div>
	<div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
		<img src="https://code.bydev24.com/uploads/code-snippts/thumb6.jpg">
	</div>
</div>


						.image-slides {display: flex;max-width: 100%;width: 400px;height: 400px;}

.image-slides .image-slide-block {width: 100%;transition-duration: 0.6s;}

.image-slides .image-slide-block img {width: 100%;height: 100%;object-fit: cover;pointer-events: none;}


						const fullImage = (event, action) => {
	var otherTarget = document.querySelectorAll(".image-slide-block")
	if(action == 1){
		for(var i = 0; i < otherTarget.length; i++){
			otherTarget[i].style.width = '20px'
		}
		event.target.style.width = '100%'
	}else{
		for(var i = 0; i < otherTarget.length; i++){
			otherTarget[i].style.width = '100%'
		}
	}
}