Html Question posted in
Some basic documentation can be found here.

Html – I want to display card on hover

I want to display card on mouse-hover .I made two div first one is single-album and the other one is hide .I used + selector and give display none to the div named hide.
but the hover effect didn’t work.

<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>
Tags:

3

Answers


  1. 0

    The JavaScript will add event listeners for mouseover and mouseout on the .single-album element, which will control the visibility of the .hide element. Please replace any placeholder text or image sources with your actual content.

    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>
    Login or Signup to reply.
  2. 0

    Hopefully this works for you.

    #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;
}
    <html>
<head>
    <title>Hover Images</title>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,700italic' rel='stylesheet' type='text/css'>
</head>
<body>

</body>
<div class="container">
    <div class="row">
        <div id="content-item">
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm2.staticflickr.com/1131/1473713101_1c1804182a_z.jpg?zz=1">
                    <div class="caption">
                        <h2>HORROR</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm1.staticflickr.com/153/360701437_4e4979d164_z.jpg">
                    <div class="caption">
                        <h2>Horror</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm9.staticflickr.com/8246/8504604638_b55d38a34c_z.jpg">
                    <div class="caption">
                        <h2>HORROR</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</html>
    Login or Signup to reply.
  3. 0

    Hopefully this works for you. 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;
}
    <html>
<head>
    <title>Hover Images</title>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,700italic' rel='stylesheet' type='text/css'>
</head>
<body>

</body>
<div class="container">
    <div class="row">
        <div id="content-item">
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm2.staticflickr.com/1131/1473713101_1c1804182a_z.jpg?zz=1">
                    <div class="caption">
                        <h2>HORROR</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm1.staticflickr.com/153/360701437_4e4979d164_z.jpg">
                    <div class="caption">
                        <h2>Horror</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm9.staticflickr.com/8246/8504604638_b55d38a34c_z.jpg">
                    <div class="caption">
                        <h2>HORROR</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search