How to reset the opacity of an image after pressing?-CodePudding

I have an image on my page representing an up arrow and, which is used to jump to the top of the page thanks to a link). This image has an opacity of "0.2", and "1" when hovering over it with the mouse. From a smartphone or tablet, when you press on this image, the opacity remains at "1". I would like this opacity to return to "0.2" after pressing this one. How to do please?

My HTML code :

<a href="#top"><img src="./img/up.png" alt="up" title="up"></a>

My CSS code :

a > img {
    width: 60%;
    height: 60%;
    opacity: 0.2;
}
a > img:hover {
    opacity: 1;
}

Thanks

CodePudding user response：

A solution with Javascript/Jquery

I modified an answer of mine of few days ago

$('#clickMe').click(function () { 
  $(this).addClass('tothetop');
  $(this).on("animationend", function(event) {
    $(this).removeClass('tothetop')
  });
});

img {
  opacity:0.2;
} 

.tothetop {
    animation-fill-mode: forwards;
  animation-name: test;
  animation-duration: 2s;
}

@keyframes test {
  50% {opacity:1;}
  100% {opacity:0.2;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="clickMe" src="https://picsum.photos/200">

A solution using only CSS

@keyframes move {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

img {
  animation-fill-mode: forwards;
  opacity:0.2;
}

img:hover {
  animation: move 2s;
}

<img src="https://picsum.photos/200">

CodePudding user response：

try this?

a:focus>img {
   opacity: 0.2;
}

CodePudding user response：

A Pure CSS Solution without JavaScript

The problem lies with how best to implement :hover on interfaces where the user is not using a cursor controlled by a mouse or trackpad or a keyboard.

There isn't (yet) a perfect way to do this.

It doesn't exist, but we could imagine that the touchscreen counterpart to:

my-div:hover

might be:

my-div:touch

where the :hover behaviour is displayed for a second or two and then no longer displayed.

In the absence of a hypothetical :touch pseudo-class however, we can nevertheless implement one - and in CSS alone, without using JavaScript.

We can do this by introducing an animation for touchscreens - something like this:

@keyframes hoverForTouchScreens {
    
  0%, 50% {
    opacity: 1;
  }
}

We can also ensure that this animation only fires on touchscreens with a @media query:

@media screen and (hover: none) and (pointer: coarse) {

  a > img:hover {
    opacity: 0.2;
    animation: hoverForTouchScreens 2s ease-out;
  }
}

Working Example

Putting it all together:

a > img {
    opacity: 0.2;
}

a > img:hover {
    opacity: 1;
}

a > img.touchscreen-simulation:hover {
  opacity: 0.2;
  animation: hoverForTouchScreens 2s ease-out;
}

@keyframes hoverForTouchScreens {
        
  0%, 50% {
    opacity: 1;
  }
}

@media screen and (hover: none) and (pointer: coarse) {

  a > img:hover {
    opacity: 0.2;
    animation: hoverForTouchScreens 2s ease-out;
  }
}

<a href="#top">
  <img src="https://picsum.photos/120/120" alt="up" title="up">
  <img  src="https://picsum.photos/120/120" alt="up" title="up">
</a>

<p>The <code>@media query</code> won't be active on non-touch screens, so the <strong>image on the right</strong> is set up to simulate what <em>would</em> happen on a touchscreen in this setup.</p>

Working Example: