Как сделать изменение ширины блока div при наведении на него?

Question

[Secret73]

Всем привет. Верстка на bootstrap4.
Вот кусок верстки. При адаптации картинка background обрезается. Подскажите пожалуйста как сделать ,чт о бы при наведении на .col .bg ширина блока плавно увеличивалась и он накладывался на соседние div поверх, что бы не было смещения во время наведения. Пробывал разными способами, но ни как не получается сделать без смещения соседних элементов
https://jsfiddle.net/tuyaqy9y/

<div class="container-fluid">
      <div class="row no-margin">
        <div class="col bg ufw" onClick="document.location='ufashionweek.html'">
            <div class="show-block">
              <div class="site-name">Название сайта</div>
              Описание сайта
            </div>
        </div>
        <div class="col bg hlorella" onClick="document.location='hlorella.html'">
          <div class="show-block">
            <div class="site-name">Название сайта</div>
            Описание сайта
          </div>
        </div>
        <div class="col bg gc" onClick="document.location='green-city.html'">
          <div class="show-block">
            <div class="site-name">Название сайта</div>
            Описание сайта
          </div>
        </div>
        <div class="col bg praider" onClick="document.location='praider.html'">
          <div class="show-block">
            <div class="site-name">Название сайта</div>
            Описание сайта
          </div>
        </div>
        <div class="col bg pogrebok" onClick="document.location='pogrebok.html'">
          <div class="show-block">
            <div class="site-name">Название сайта</div>
            Описание сайта
          </div>
        </div>
      </div>
    </div>

.bg {
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

.bg:hover .show-block {
  margin-bottom: 0;
}

.bg:hover:after {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.6)));
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.bg.ufw {
  background: url('../img/ufw.png') no-repeat left;
  background-size: cover;
}

.bg.hlorella {
  background: url('../img/hlorella.png') no-repeat left;
  background-size: cover;
}
.show-block {
  font-size: 42px;
  line-height: 50px;
  font-weight: bold;
  color: #ffffff;
  text-align: right;
  position: absolute;
  bottom: 0px;
  margin-bottom: -180px;
  -webkit-transition: margin 0.5s linear;
  -o-transition: margin 0.5s linear;
  transition: margin 0.5s linear;
  right: 10px;
  min-height: 150px;
  z-index: 2;
}

.show-block .site-name {
  background: -webkit-linear-gradient(329.16deg, #1C84FF 39.48%, #FC3D00 163.2%);
  background: -o-linear-gradient(329.16deg, #1C84FF 39.48%, #FC3D00 163.2%);
  background: linear-gradient(120.84deg, #1C84FF 39.48%, #FC3D00 163.2%);
  font-size: 18px;
  text-align: center;
  line-height: 25px;
}

Comments

[Сергей Сергей]

понадобится определить, какие свойства заИМПОРТАНТены в бутстраповских классах колонок, и ещё раз повторить проделанное ранее с переИМПОРТАНТиванием нужных свойств.
И вообще, аккордеон нельзя сделать?

[Secret73]

Сергей Сергей, Чесно говоря не совсем понял ,что вы имеете в виду про импортант ,я ими не пользовался при верстке. Аккордеон, можно пример?

Answer 1

[CODALSD]

.bg {
  background-size: cover;
  height: 100%;
  overflow: hidden;
  transition: ease all 0.80s;
}

.bg:hover .show-block {
  margin-bottom: 0;
}
.bg:hover:first-child {
  padding-right:100px;
  margin-right:-85px;
  transition: ease all 0.80s;
  z-index:100;
}
.bg:hover {
  padding:0 100px;
  margin:0 -85px;
  transition: ease all 0.80s;
  z-index:100;
}
.bg:hover:last-child {
  padding-left:100px;
  margin-left:-85px;
  transition: ease all 0.80s;
  z-index:100;
}

решение на скорую руку и по колхозному ,)

Comments

[Secret73]

Спасибо, главное основа ))

Answer 2

[Андрей Иванов]

Что бы не смещал надо позиционировать его абсолютно
Что бы плавно было применить транзишн

Comments

[Secret73]

Можете набросать пример моего случая? У меня пока не все удачно потому что

[Secret73]

Андрей Иванов , если бы было 2 блока, то проблем с абсолютным позиционированием не было. А если их как у меня 5 или 6 например, как тут их абсолютно позиционировать?Для каждого выставлять место расположения? Так наверное не правильно