0

Получается сделать transform для любого элемента отдельно, либо трансформацию блока при этом трансформируя блоки внутри него. Необходимо чтобы трансформировался весь блок целиком при наведении и при этом не поднимались остальные блоки)

Возможно ли это сделать без JS ?

.row {
  background-color: #343444;
  -webkit-transition: transform 0.5s, border-radius 0.7s, box-shadow 1s;
  -moz-transition: transform 0.5s, border-radius 0.7s, box-shadow 1s;
  -o-transition: transform 0.5s, border-radius 0.7s, box-shadow 1s;
  max-height: auto;
}

.row :hover {
  display: block;
  -webkit-transform: scale(1.01);
  -moz-transform: scale(1.01);
  -o-transform: scale(1.01);
  box-shadow: 2px 3px 6px #232323;
  image-rendering: optimizeQuality;
  border-radius: 15px;
}

.last {
  position: relative;
  left: 25px;
  top: 25px;
  background-color: #fff;
  width: 600px;
  height: 500px;
  display: block;
  padding: 10px;
}

.last :hover {
  transform: none;
}

.news_last__time {
  font-weight: 900;
  text-align: right;
}

.news_last__data {
  font-weight: 900;
  text-align: left;
  margin-left: 10px;
}

.news_last__tag {
  display: block;
  width: auto;
  height: auto;
}
<div class="row">
  <div class="last">
    <h3>Недавно...</h3>
    <a href="#"><img src="http://dummyimage.com/500x300/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></a>
    <br>
    <div class="news_last_content">
      <div class="news_last__data"><small><data>12.12.12.2037</data></small></div>
      <div class="news_last__time"><small><time>13:45</time></small></div>
      <br>
      <div class="news_last__tag">
        <a href="#">
          <h4>Короткое название какой-то актуальной новости ...</h4>
        </a>
      </div>
    </div>
  </div>
</div>

2 ответа 2

2

Если я вас правильно понял, тогда вот мой вариант:

.row {
  background-color: #343444;
  -webkit-transition: transform 0.5s, border-radius 0.7s, box-shadow 1s;
  -moz-transition: transform 0.5s, border-radius 0.7s, box-shadow 1s;
  -o-transition: transform 0.5s, border-radius 0.7s, box-shadow 1s;
  max-height: auto;
}

.row :hover.last {
  display: block;
  -webkit-transform: scale(1.01);
  -moz-transform: scale(1.01);
  -o-transform: scale(1.01);
  box-shadow: 2px 3px 6px #232323;
  image-rendering: optimizeQuality;
  border-radius: 15px;
}

.last :hover {
  transform: none;
}

.last {
  position: relative;
  left: 25px;
  top: 25px;
  background-color: #fff;
  width: 600px;
  height: 500px;
  display: block;
  padding: 10px;
}

.last :hover {
  transform: none;
}

.news_last_content {
  transform: none;
}

.news_last__time {
  font-weight: 900;
  text-align: right;
}

.news_last__data {
  font-weight: 900;
  text-align: left;
  margin-left: 10px;
}

.news_last__tag {
  display: block;
  width: auto;
  height: auto;
}
<div class="row">
  <div class="last">
    <h3>Недавно...</h3>
    <a href="#"><img src="http://dummyimage.com/500x300/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></a>
    <br>
    <div class="news_last_content">
      <div class="news_last__data"><small><data>12.12.12.2037</data></small></div>
      <div class="news_last__time"><small><time>13:45</time></small></div>
      <br>
      <div class="news_last__tag">
        <a href="#">
          <h4>Короткое название какой-то актуальной новости ...</h4>
        </a>
      </div>
    </div>
  </div>
</div>

1
  • @AnatolyMill Обновил ответ 12 сен 2019 в 6:45
2

Попробуйте так:

.row:hover .last {
   transform: ...
}

Вместо .last может быть любой вложенный в .row элемент. Таких правил можем быть несколько и все они сработают при наведении на .row.

1
  • к сожалению ваш вариант не сработал, но вы натолкнули на мысль прописать стили для каждого класса. вышло как то так: пример однако это полностью не решило проблему. Как видите все блоки при наведении "ходуном ходят" 12 сен 2019 в 7:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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