Shopify Question posted in
The Shopify help center can be found here.

Using touchmove to trigger hover event – Shopify

I’m relatively new to coding and am running into a particular issue with my website. My homepage has images on it with overlay text hover effect that occurs when a cursor is moved over the image. It works perfectly on desktop, however, not on mobile. I would like for the hover text to appear when the user swipes across the image in any direction. I’ve done some research and it appears that I should somehow be using jQuery and the touchmove function to make this happen. But I just can’t figure it out. I am using Shopify (debut theme) to build my website. Any help will be greatly appreciated!

Here’s my CSS for hover event:

//hover effect//
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 99%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
}

.container:hover .overlay {
  opacity: 0.7;
}

.text {
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: pre;
}

Thanks!!!!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    so Moustachiste's code works! It had a few syntax errors but I was able to resolve them quickly. Here's the final version: 

    const myTargetElements = document.getElementsByClassName('overlay');

// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {

    // add hover style
    element.addEventListener('touchmove', function (e) {
        e.target.classList.add('hover'); // or whichever class name you'd like
    });

    // remove hover style on end
    element.addEventListener('touchend', function (e) {
        e.target.classList.remove('hover'); // or whichever class name you'd like
    });
    });

    Paste the code into your theme.js and adjust the variable names accordingly. Should work for everyone!

    Cheers to this guy!


  2. 0

    You’d need to apply a class with the desired effect to the target element.
    You could do it with Jquery, but javascript is perfectly capable to do it on its own.
    Something like:

    Javascript:

    const myTargetElement = document.getElementsByClassName('overlay')[0]; // index to be confirmed

// add hover style
myTargetElement.addEventListener('touchmove', function (e) {
    e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
myTargetElement.addEventListener('touchend', function (e) {
    e.target.classList.remove('hover'); // or whichever class name you'd like
});

    CSS:

    .container:hover .overlay,
.overlay.hover {
   opacity: 0.7;
}

    Note: if you want to target all the elements .overlay on your page with that code, you would need something like:

    Javascript:

    const myTargetElements = document.getElementsByClassName('overlay');

// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {

    // add hover style
    element.addEventListener('touchmove', function (e) {
        e.target.classList.add('hover'); // or whichever class name you'd like
    });

    // remove hover style on end
    element.addEventListener('touchend', function (e) {
        e.target.classList.remove('hover'); // or whichever class name you'd like
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search