не получается правильно CSS

Question

У меня есть требование согласно изображению ниже

Я пытался сделать это с помощью таблицы, но все еще не удалось выровнять боковые изображения.

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>

Мое требование:

Я хочу, чтобы центральное активное изображение было размыто слева и справа. боковые изображения должны выглядеть так, как будто они находятся за центральным изображением

Answer 1

Может быть, этот фрагмент поможет.

бордюр-коллапс: коллапс; на .контейнере установить отступы: 0; изображения.

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

Answer 2

Возможно, вы можете попробовать этот код, но чтобы он скользил по слайдам, вам нужно добавить jQuery в код. Рабочий пример здесь Если вам нужна дополнительная помощь с этим размытием боковых изображений, свяжитесь со мной по электронной почте 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 3

Ваш запрос все еще неясен для меня, но я старался изо всех сил, чтобы понять и ответить на него.

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

а вот и CSS

.container{
    width: 100%;
    height: 400px;
}

.left-image, .right-image{
    width: 33.33%;
    overflow: hidden;
}

.center-image{
    width: 33.33%;

}

Ниже приведен результат и скрипка

https://jsfiddle.net/u97oewqy/