Change hover effect for mobile devices

Question

.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff}
.hovereffect{float:left;position:relative;cursor:default}
.hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.hovereffect img{display:block;width:100%;height:250px;position:relative;-webkit-transition:all .4s linear;transition:all .4s linear}
.hovereffect h2{position:relative;font-size:17px;background:#DF691A;-webkit-transform:translatey(-100px);-ms-transform:translatey(-100px);transform:translatey(-100px);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;padding:10px}
.hovereffect a.info, .hovereffect:active a.info{text-decoration:none;display:inline-block;border:1px solid #fff;background-color:#DF691A;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin:80px 0 0;padding:7px 14px}

<div class="col-md-4">
  <div class="thumbnail">
    <div class="hovereffect">
      <img src="./images/javascriptcalculator.png" alt="javascript calculator">
      <div class="overlay">
        <h2>React Calculator</h2>
        <a class="info" href="https://codepen.io/azambadar/pen/GBzOzN" target="_blank">Demo Here</a>
      </div>
    </div>
  </div>
</div>

I am using bootstrap and have an image with hover effect which is triggered by the pointer, hover effect (h2 and a elements) appears when cursor comes on the image but this hover effect is not working on mobile devices and I want to change this through CSS media queries so h2 and a elements appear permanently on the image without hover effect.

How can I achieve this ?

Below are my html and css codes, please check and let me know if this is possible.

<div class="col-md-4">
  <div class="thumbnail">
    <div class="hovereffect">
      <img src="./images/javascriptcalculator.png" alt="javascript calculator">
      <div class="overlay">
        <h2>React Calculator</h2>
        <a class="info" href="https://codepen.io/azambadar/pen/GBzOzN" target="_blank">Demo Here</a>
      </div>
    </div>
  </div>
</div>

Here is the CSS part

.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff}
.hovereffect{float:left;position:relative;cursor:default}
.hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.hovereffect img{display:block;width:100%;height:250px;position:relative;-webkit-transition:all .4s linear;transition:all .4s linear}
.hovereffect h2{position:relative;font-size:17px;background:#DF691A;-webkit-transform:translatey(-100px);-ms-transform:translatey(-100px);transform:translatey(-100px);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;padding:10px}
.hovereffect a.info, .hovereffect:active a.info{text-decoration:none;display:inline-block;border:1px solid #fff;background-color:#DF691A;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin:80px 0 0;padding:7px 14px}

Many thanks

[Interaction Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-interaction) may help and also check [browser support](https://caniuse.com/#feat=css-media-interaction). — skobaljic, Nov 02 '18 at 10:14

score 0 · Answer 1 · answered Nov 02 '18 at 10:28

I think you can detect if the user is using a touch-based device, for example using the function mentioned here:

Detecting a mobile browser

And then add a class to your element which always display the desired effect otherwise displayed on :hover

Hope this helps

Change hover effect for mobile devices

1 Answers1