.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>Utilizing Bootstrap, an image with a hover effect has been created where the effect is triggered by cursor interaction. However, this hover effect does not work on mobile devices. The goal is to modify it through CSS media queries so that the elements (h2 and a) appear permanently when viewed on mobile devices without requiring hover interaction.
The HTML and CSS codes are provided below for reference. Assistance in achieving this desired outcome would be greatly appreciated.
<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>
CSS code snippet:
.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}
Thank you for your assistance!