0

Я новичок в мире веба и только учусь. Есть такая задача: при наведении курсора на блок требуется, чтобы блок и сама картинка увеличивалась. Я написал такой html:

.lesson-item {
  position: relative;
  min-height: 170px;
  max-width: 430px;
  width: 100%;
  z-index: 1;
}

.bottom {
  height: 25px;
  position: relative;
  padding: 0 0 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.lesson-item {
  transition: all 300ms linear 0ms;
}

.lesson-item:hover {
  transform: rotate(0deg) scale(1.2, 1.2);
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
  z-index: 999;
  transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
  cursor: pointer;
}

.lesson-item:hover img {
  transform: rotate(0deg) scale(1.2, 1.2);
  transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
}
    <div class="lessons-wrap">

<div class="lesson-item">
    <div class="lesson new">
        <div class="top">
            <img src="img/img-1.jpg" alt="">
            <div class="description">
                <a href="audio.html" class="lesson-title" >asdasdasd</a>
                <div class="links">
                    <a href="#"><i class="fab fa-youtube"></i></a>
                    <a href="#"><i class="far fa-newspaper"></i></a>
                </div>
                <div class="player">
                    <audio preload="auto" controls>
                        <source src="assets/audio.mp3" />
                        <source src="assets/audio.ogg" />
                        <source src="assets/audio.wav" />
                    </audio>
                </div>
                <div class="time">
                    <i class="fas fa-user"></i>
                    <a href="#">asdasd</a>
                    <i class="far fa-calendar-alt"></i>
                    <p>21.08.2018</p>
                </div>
            </div>
        </div>
        <div class="bottom">
            <a href="#">asd</a>
            <a href="#">asd</a>
            <a href="#">asd</a>
            <a href="#">asd</a>
            <a href="#">asd</a>
            <p id="string" class="btn"><span class="span_icon">+</span></p>
        </div>
    </div>
</div>
</div>

Здесь блок увеличивается как надо, а картинка нет. Мне нужно, чтобы она увеличивалась именно так:

Вот как нужно

Чтобы картинка увеличилась и блоки сместились вправо.

1 ответ 1

1

Если правильно понял вопрос то: transform-origin: left top;

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.lesson-item {
  max-width: 100%;
  transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
  cursor: pointer;
  transform-origin: left top;
}

.lesson-item:after {
  content: '';
  clear: both;
  display: block;
}

.img {
  background-size: cover;
  float: left;
  margin-right: 1rem;
  width: 100px;
  height: 100px;
  transition: height 300ms, width 300ms;
  transform-origin: left top;
}

.lesson-item .bottom {
  margin-left: 0;
  transition: margin-left 300ms;
  display: flex;
  flex-wrap: wrap;
}

.description {
  min-height: 110px;
  margin-left: 110px;
  transition: margin-left 130ms;
}

.lesson-item:hover .description {
  margin-left: 130px;
}

.lesson-item:hover .img {
  height: 150px;
  width: 150px;
}

.lesson-item:hover .bottom {
  margin-left: 130px;
}

.lesson-item:hover {
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}
<div class="lesson-item">
  <div class="img" style="background-image: url(https://dummyimage.com/100x100/000/fff)"></div>
  <div class="description">
    <div class="links">
      <a href="#"><i class="fab fa-youtube"></i></a>
      <a href="#"><i class="far fa-newspaper"></i></a>
    </div>

    <div class="time">
      <i class="fas fa-user"></i>
      <a href="#">Text Text</a>
      <i class="far fa-calendar-alt"></i>
      <p>21.08.2018</p>
    </div>
  </div>

  <div class="bottom">
    <a href="#">Text</a>
    <a href="#">Text</a>
    <a href="#">Text</a>
    <a href="#">Text</a>
    <a href="#">Text</a>
  </div>
</div>

10
  • Semenov, только в этом случае текст не смещается вправо и блок не занимает место текста 28 фев 2019 в 16:51
  • Не понял, задача была смешение от угла. Опишите что не так легко опправить 28 фев 2019 в 16:58
  • Мне нужно, чтобы при наведении было как на картинке. То есть картинка занимала место текста, а текст смещался вправо. 28 фев 2019 в 17:02
  • Semenov, можете помочь с этим вопросом? 28 фев 2019 в 17:31
  • Переделал, посмотрите. Дума как вы хотели. 28 фев 2019 в 17:59

Ваш ответ

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

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