not getting the css right - html

Question

I have the requirement as per below image
I tried to this with table, but still no success in aligning the side images.
testTable.html
<style>
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 10%;
overflow: hidden;
}
.center-image{
width: 80%;
}
</style>
<table class="container">
<tr>
<td class="left-image">
<img src="img1.png" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="img2.jpg" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="img3.png" alt="Snow" style="width:100%">
</td>
</tr>
</table>
My requirement:
I want to have center active image, with left and right images blur. side images should look like they are behind the center image

Answer 1

Maybe you can try this code but to make it slide through slides you need to add jQuery to code. Working example here
If you need further help with that blur to side images contact me through email faceree123#gmail.com :)
<div class="slider-wrapper">
<div class="slider-btns">
<button class="slider-btn btn-1 active"></button>
<button class="slider-btn btn-2"></button>
<button class="slider-btn btn-3"></button>
</div>
<div class="slider">
<div class="slide">
<img class="slide-img" src="your-1st-image.src">
<!-- This is not necessary --><p>Slide 1</p>
</div>
<div class="slide">
<img class="slide-img" src="your-2nd-image.src">
<!-- This is not necessary --><p>Slide 2</p>
</div>
<div class="slide">
<img class="slide-img" src="your-3rd-image.src">
<!-- This is not necessary --><p>Slide 3</p>
</div>
</div>
</div>
<style>
*{
margin: 0; padding: 0;
}
.slider-wrapper{
overflow: hidden;
position: relative;
width: 100%; height: 300px; /* You can choose your own width and height */
background: grey; /* This is not necessary */
}
.slider-wrapper > .slider{
position: relative;
width: 300%; height: 100%;
left: 0%;
transition: 1s;
}
.slider-wrapper > .slider-btns{
z-index: 999;
position: absolute;
left: 50%; transform: translateX(-50%);
top: 90%;
}
.slider-wrapper > .slider-btns > button.active{
width: 20px; height: 20px;
border-radius: 50px;
border: none;
}
.slider-wrapper > .slider-btns > .slider-btn{
width: 15px; height: 15px;
border-radius: 50px;
border: none;
}
.slider-wrapper > .slider > .slide{
text-align: center; /* This is not necessary */
float: left;
margin: 0 20px;
width: calc((70% / 3) - 40px); height: 100%;
background: purple; /* This is not necessary */
}
.slider-wrapper > .slider > .slide > .slide-img{
width: 100%; height: auto;
display: none; /* When you use this code delete this line */
}
p{
font-family: Arial; font-size: 40px;
line-height: 300px;
} /* This style is not necessary */
</style>

Answer 2

Your query still not clear to me but I tried my best to understand and answer it.
<table class="container">
<tr>
<td class="left-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
</tr>
</table>
and here is the CSS
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 33.33%;
overflow: hidden;
}
.center-image{
width: 33.33%;
}
Below is the result and Fiddle
https://jsfiddle.net/u97oewqy/

Answer 3

Maybe this snippet helps.
border-collapse: collapse; on the .container
set padding: 0; the images.
<style>
.container{
width: 100%;
height: 200px;
border-collapse: collapse;
}
.left-image, .right-image, .center-image {
padding: 0
}
.left-image, .right-image{
width: 10%;
overflow: hidden;
}
.center-image{
width: 80%;
}
</style>
<table class="container">
<tr>
<td class="left-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>