Mobile "hover" effect when you touch the div

How To
1

Hi everyone.

I’ve been working on my hover-state for this specific page with a portfolio-post query loop. I’m very happy with how it looks on desktop/mouse devices but can’t seem to entirely get it to work on mobile.

Here’s the page I’m talking about: Beelden Archives | Jolanda Meulendijks

It’s all set up in the element that houses the query, with only a transition and the following CSS through bricks. Within the query are the image (clickable to post), title (clickable to post) and subtitle. That’s basically how it’s set up.

/* hover devices */

@media (hover: hover) {
 
  %root%:hover img {
      opacity:0.5;    }
  
  %root%:hover a {
    text-decoration: none; 
    color: #ff6600;  }

  h1::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 5px;
    left: 0;
    background-color: #ff6600;
    color: #ff6600;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;  }

  %root%:hover h1::after {
    transform: scaleX(1);
    transform-origin: bottom left;
    color: #ff6600;  }
  
}

/* non-hover devices */

@media (hover: none) {

  %root%:active img {
      opacity:0.5;    }
 
  %root%:active a {
    text-decoration: none; 
    color: #ff6600;  }


  h1::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 5px;
    left: 0;
    background-color: #ff6600;
    color: #ff6600;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;  }

  %root%:active h1::after {
    transform: scaleX(1);
    transform-origin: bottom left;
    color: #ff6600;  }

}

The top part of the code seems to work flawlessly, and I understood that for touch devices you could replace :hover with :active but it’s not working 100%. I want this state to be triggered when you scroll past the post, so whenever your finger is “touching” the entire div would be a great start.

Currently it looks like it’s doing this; but ONLY for the first post of the page and that’s where I’m at a loss for what to try cause this obviously is supposed to work for all posts on the page. Other than that the way it works on the first page seems good; it triggers the hoverstate when you scroll by, and undo’s the changes when you get past it, just not for anything past this point.

Anyone have an idea? :slight_smile: More info needed to fix this? Let me know!

UPDATE: I just checked in safari (iOS, I’m usually using Chrome) and in safari it’s doing nothing at all. So this “hover state only works once” only counts for iOS chrome I guess. No clue what is happening.

2

Update: after a long while of Googling I found a solution. Not sure if this is the best one, but it works :slight_smile:

I added the following to the body (header) scripts in Bricks settings:

<html><body ontouchstart></body></html>

Far as I understood it the :active would only work for whatever was inside the viewport when loading the page, which caused the problem I had where it would only work for the top post.

Also I moved the code to the child theme stylesheet so I could use the effect on more than only this one page. The final code looks like this, for whoever is interested:
I added the class ‘hoverblock’ to all the query blocks that I wanted to have this hover effect (change the opacity of the image + underline the title).



.hoverblock{
	transition: all 1s ease-in-out;
}

/* code for hover devices */

@media (hover: hover) {
  

  .hoverblock:hover img {
      opacity:0.5;
	transition: all 0.5s ease-in-out;
    }
  
  .hoverblock:hover a {
    text-decoration: none; 
    color: #ff6600;
  }

  .hoverblock .brxe-heading::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 5px;
    left: 0;
    background-color: #ff6600;
    color: #ff6600;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }

  .hoverblock:hover .brxe-heading::after {
    transform: scaleX(1);
    transform-origin: bottom left;
    color: #ff6600;
  }
  
}

/* code for non-hover devices */

@media (hover: none) {

 .hoverblock:active img {
      opacity:0.5;
    }

.hoverblock:active a {
    text-decoration: none; 
    color: #ff6600;
  }

  .hoverblock .brxe-heading::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 5px;
    left: 0;
    background-color: #ff6600;
    color: #ff6600;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }

  .hoverblock:active .brxe-heading::after {
    transform: scaleX(1);
    transform-origin: bottom left;
    color: #ff6600;
  }

}