3

Вопрос инициирован ответом в топике: Как я могу управлять применением z-index? Hover отменяет z-index до завершения transitions

В топике полностью решена проблема заданная OP. Всё работает и при добавлении текста в колонки, динамические изменяющиеся по ширине при наведении .

Но с добавлением иконок svg возникли проблемы:

body {
  padding: 0;
  margin: 0;
}

.category {
  float: left;
  width: 16.66%;
  text-align: center;
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

#column1 {
  background-color: #147afaff;
  position: absolute;
  height: 100%;
}

#column2 {
  background-color: #fa9414ff;
  position: absolute;
  left: 16.66%;
  height: 100%;
}

#column3 {
  background-color: #2bae66ff;
  position: absolute;
  left: 33.32%;
  height: 100%;
}

#column4 {
  background-color: #fdd20eff;
  position: absolute;
  left: 49.98%;
  height: 100%;
}

#column5 {
  background-color: #603f83ff;
  position: absolute;
  left: 66.64%;
  height: 100%;
}

#column6 {
  background-color: #f93822ff;
  position: absolute;
  left: 83.30%;
  height: 100%;
}

#column1:hover {
  width: 100%;
  z-index: 1000;
}

#column2:hover {
  margin-left: -16.66%;
  width: 100%;
  z-index: 1000;
}

#column3:hover {
  margin-left: -33.32%;
  width: 100%;
  z-index: 1000;
}

#column4:hover {
  margin-left: -49.98%;
  width: 100%;
  z-index: 1000;
}

#column5:hover {
  margin-left: -66.64%;
  width: 100%;
  z-index: 1000;
}

#column6:hover {
  margin-left: -83.30%;
  width: 100%;
  z-index: 1000;
}
<section id="categories">
    <div class="row">
      <div id="column1" class="category">
        <h1>Column 1</h1> 
		 <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f511.svg" /> </div>
      </div>
      <div id="column2" class="category">
        <h1>Column 2</h1> 
		 <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f500.svg" /> </div>
      </div>
      <div id="column3" class="category">
        <h1>Column 3</h1>
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f508.svg" /> </div>
      </div>
      <div id="column4" class="category">
        <h1>Column 4</h1> 
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f407.svg" /> </div>
      </div>
      <div id="column5" class="category">
        <h1>Column 5</h1>
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f406.svg" /> </div>
      </div>
      <div id="column6" class="category">
        <h1>Column 6</h1> 
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f305.svg" /> </div>
      </div>
    </div>
  </section>

При изменении ширины колонок, SVG иконки тоже увеличиваются в размерах.

Как всё-таки добиться с помощью правил CSS сохранения начальных размеров иконок при динамическом увеличении ширины родительских колонок?

Интересуют конкретные ответы, основанные на коде в вопросе, чтобы всё соответствовало.

1

2 ответа 2

3

Предлагаю вот так:

.img1 {
  width: calc(100vw / 6);
}

6 - это количество колонок...

body {
  padding: 0;
  margin: 0;
}

.img1 {
  width: calc(100vw / 6);
}

.category {
  float: left;
  width: 16.66%;
  text-align: center;
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

#column1 {
  background-color: #147afaff;
  position: absolute;
  height: 100%;
}

#column2 {
  background-color: #fa9414ff;
  position: absolute;
  left: 16.66%;
  height: 100%;
}

#column3 {
  background-color: #2bae66ff;
  position: absolute;
  left: 33.32%;
  height: 100%;
}

#column4 {
  background-color: #fdd20eff;
  position: absolute;
  left: 49.98%;
  height: 100%;
}

#column5 {
  background-color: #603f83ff;
  position: absolute;
  left: 66.64%;
  height: 100%;
}

#column6 {
  background-color: #f93822ff;
  position: absolute;
  left: 83.30%;
  height: 100%;
}

#column1:hover {
  width: 100%;
  z-index: 1000;
}

#column2:hover {
  margin-left: -16.66%;
  width: 100%;
  z-index: 1000;
}

#column3:hover {
  margin-left: -33.32%;
  width: 100%;
  z-index: 1000;
}

#column4:hover {
  margin-left: -49.98%;
  width: 100%;
  z-index: 1000;
}

#column5:hover {
  margin-left: -66.64%;
  width: 100%;
  z-index: 1000;
}

#column6:hover {
  margin-left: -83.30%;
  width: 100%;
  z-index: 1000;
}
<section id="categories">
    <div class="row">
      <div id="column1" class="category">
        <h1>Column 1</h1> 
		 <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f511.svg" /> </div>
      </div>
      <div id="column2" class="category">
        <h1>Column 2</h1> 
		 <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f500.svg" /> </div>
      </div>
      <div id="column3" class="category">
        <h1>Column 3</h1>
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f508.svg" /> </div>
      </div>
      <div id="column4" class="category">
        <h1>Column 4</h1> 
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f407.svg" /> </div>
      </div>
      <div id="column5" class="category">
        <h1>Column 5</h1>
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f406.svg" /> </div>
      </div>
      <div id="column6" class="category">
        <h1>Column 6</h1> 
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f305.svg" /> </div>
      </div>
    </div>
  </section>

3
  • вот это настоящее решение. Адаптивность svg иконок при изменении окна браузера и одновременно не влияет изменение ширины колонок. 5 июл 2019 в 12:39
  • да я сразу это понял :) Делим ширину окна на 6 равных частей. Как я мог забыть об этом способе :-) 5 июл 2019 в 12:45
  • 2
    @Alexandr_TT я больше для других читателей =) 5 июл 2019 в 12:46
1

Добавьте это, к примеру:

.img {
  height: 300px;
}
1
  • если бы всё было так просто - img{height:48px;} Но как спросил, так и получил ответ. Я имел ввиду использование процентов для адаптивности svg иконки, то есть не получалось img{height:5%;} 5 июл 2019 в 12:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.