CODEWITHSUNDEEP
javascripthtmlcss
cbra
cbra

Reputation: 77

how to hover when scrolling?

this code will hover on pointer movement but i need a hover when scrolling what line of code i have to join here. when the page is scrolled the hover has to be hidden

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <a href="#" class="image-wrap">
      <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" style="width:700px;height:800px;"/>
        <div class="overlay red">
        <h3>Image Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
        </div>
        </a>
            
       
    </div>
  
  </div>
</div>
<style>
.col-sm-6 {
  min-height: 500px;
  background: lightgrey;
  text-align: center;
}

.image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;  
}

.image-wrap .overlay {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:white;
  opacity: 1;
  transition:opacity .5s ease;
}

.image-wrap:hover .overlay {
  opacity: 0;
}

.red {
  background: rgba(0, 0, 6, 0.7);
}


</style>

what i have to do here. please help me to solve this.

Upvotes: 1

Views: 257

Answers (1)

Shahnawaz Hossan
Shahnawaz Hossan

Reputation: 2720

You can achieve this by adding/removing a class that has pointer-events: none when scrolling like this:

var body = document.body,
    timer;

window.addEventListener('scroll', function () {
    clearTimeout(timer);

    if (!body.classList.contains('disable-hover')) {
        body.classList.add('disable-hover');
    }

    timer = setTimeout(function () {
        body.classList.remove('disable-hover');
    }, 500);
}, false);
.col-sm-6 {
    min-height: 500px;
    background: lightgrey;
    text-align: center;
}

.image-wrap {
    display: inline-block;
    max-width: 100%;
    position: relative;
}

.image-wrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    opacity: 1;
    transition: opacity .5s ease;
}

.image-wrap:hover .overlay {
    opacity: 0;
}

.red {
    background: rgba(0, 0, 6, 0.7);
}

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <a href="#" class="image-wrap">
                <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt=""
                    style="width:700px;height:800px;" />
                <div class="overlay red">
                    <h3>Image Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
                </div>
            </a>
        </div>

    </div>
</div>

If you want to know how robust technique is this approach, you can have a look at this tutorial.

Upvotes: 1

Related Questions