悬停时放大图像尺寸

Question

This is how I need to see my block after hover effect我有这个方块。 block with image and text

当我将鼠标悬停在方块上时，它会变大，但是我也需要使图像变大。我怎样才能做到这一点？我的意思是我需要将等于块高的图像放大而不是更大，然后将文本向右移动。

下面是代码：

.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; }
This is hover code of block:

.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;
}

<div class="lesson-item">

        <div class="top">
            <img src="https://via.placeholder.com/100" alt="">
            <div class="description">
                <a href="audio.html" class="lesson-title" >Text Text Text</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="#">Text Text</a>
                    <i class="far fa-calendar-alt"></i>
                    <p>21.08.2018</p>
                </div>
            </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>
            <p id="string" class="btn"><span class="span_icon">+</span></p>
        </div>
</div>

Answer 1

希望这对您有用。

.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="lesson-item">

        <div class="top">
            <img src="https://dummyimage.com/100x100/000/fff" alt="">
            <div class="description">
                <a href="audio.html" class="lesson-title" >Text Text Text</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="#">Text Text</a>
                    <i class="far fa-calendar-alt"></i>
                    <p>21.08.2018</p>
                </div>
            </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>
            <p id="string" class="btn"><span class="span_icon">+</span></p>
        </div>
</div>