希望这对你有用。

#content-item {
    width: 100%;
    overflow: hidden;
    margin: 30px 0;
}
#content-item .item{
    height: 60vh;
    overflow: hidden;
    cursor: pointer;
    background: #000;
  margin-top:30px;
  display: flex;    
}
#content-item .item img {
    height:100vh;
  width: 500vh;
    opacity: .66;
}
#content-item .item:hover img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity:1;
}
#content-item .item .caption {
    position: absolute;
    bottom: -50px;
    margin-left: 10px;
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
#content-item .item .caption h2 {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}
#content-item .item .caption p {
    margin: 0;
    color: #fff;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}
#content-item .item:hover .caption {
    opacity: 1;
    bottom: 10px;
}

个字符

JavaScript将在**.single-album元素上添加mouseover和mouseout的事件侦听器，这将控制.hide**元素的可见性。请将任何占位符文本或图像源替换为您的实际内容。

document.addEventListener("DOMContentLoaded", function() {
      const singleAlbum = document.querySelector('.single-album');
      const hideElement = document.querySelector('.hide');

      singleAlbum.addEventListener('mouseover', function() {
        hideElement.style.display = 'block';
      });

      singleAlbum.addEventListener('mouseout', function() {
        hideElement.style.display = 'none';
      });
    });

.hide {
      display: none;
    }

<div class="row">
  <div class="col-12">
    <!-- Single Album -->
    <div class="single-album">
      <img src="img/book-imgs/DH.jpg" alt="">
      <div class="album-info">
        <a href="#">
          <h5>HORROR</h5>
        </a>
        <p>Dark House</p>
      </div>
    </div>
  </div>
</div>

<div class="row hide">
  <div class="col-lg-12">
    <div class="card mb-3" style="max-width: 540px;height:240px">
      <div class="row g-0">
        <div class="col-md-4">
          <img src="img/book-imgs/NHrt.jpg" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">NHRT</h5>
            <p class="card-text">This is a wider card with supporting text below as a lead-in to additional content. This content is a little bit longer.</p>
            <button class="ba-btn">Download</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

希望这对你有用。codepen

#content-item {
    width: 100%;
    overflow: hidden;
    margin: 30px 0;
}
#content-item .item{
    height: 60vh;
    overflow: hidden;
    cursor: pointer;
    background: #000;
  margin-top:30px;
  display: flex;    
}
#content-item .item img {
    height:100vh;
  width: 500vh;
    opacity: .66;
}
#content-item .item:hover img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity:1;
}
#content-item .item .caption {
    position: absolute;
    bottom: -50px;
    margin-left: 10px;
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
#content-item .item .caption h2 {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}
#content-item .item .caption p {
    margin: 0;
    color: #fff;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}
#content-item .item:hover .caption {
    opacity: 1;
    bottom: 10px;
}

个字符