CSS transition opacity not working on mobile phones - css

Question

I am using a code from this site: https://codepen.io/tutsplus/pen/rQrVBg to make an image grid with transition whey you touch or move over it shows some text. The transition works fine on PC, but when I was testing on my mobile phone I got the opacity color over a picture. I tested in Safari, Chrome and Edge and doesn't work neither.
body {
padding: 20px;
font-family: sans-serif;
background: #f2f2f2;
}
img {
width: 100%;
/* need to overwrite inline dimensions */
height: auto;
}
h2 {
margin-bottom: .5em;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
/* hover styles */
.location-listing {
position: relative;
}
.location-image {
line-height: 0;
overflow: hidden;
}
.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
transform: scale(1.1);
}
.location-title {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
background: rgba(90, 0, 10, 0.4);
color: white;
/* position the text in t’ middle*/
display: flex;
align-items: center;
justify-content: center;
}
.location-listing:hover .location-title {
opacity: 1;
}
.location-listing:hover .location-image img {
filter: blur(2px);
}
/* for touch screen devices */
#media (hover: none) {
.location-title {
opacity: 1;
}
.location-image img {
filter: blur(2px);
}
}
<div class="child-page-listing">
<h2>Our Locations</h2>
<div class="grid-container">
<article id="3685" class="location-listing">
<a class="location-title" href="#">
San Francisco
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
</div>
</article>
<article id="3688" class="location-listing">
<a class="location-title" href="#">
London
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
</a>
</div>
</article>
<article id="3691" class="location-listing">
<a class="location-title" href="#">
New York
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
</a>
</div>
</article>
<article id="3694" class="location-listing">
<a class="location-title" href="#">
Cape Town
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</a>
</div>
</article>
<article id="3697" class="location-listing">
<a class="location-title" href="#">
Beijing
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/beijing-768x432.jpg" alt="beijing">
</a>
</div>
</article>
<article id="3700" class="location-listing">
<a class="location-title" href="#">
Paris
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/paris-768x432.jpg" alt="paris">
</a>
</div>
</article>
</div>
<!-- end grid container -->
</div>

Answer 1

Since there is no hover effect in mobile browsers (no mouse cursor to move/hover over the images), you can't get the same behaviour on mobile/touchscreen devices.
The media query at the end of the CSS is applying a style to all '.location-title' elements, and a blur to all '.location-image img' elements. These effects will be applied to these regardless of whether the user is interacting with those elements. I'd say in this sample, that's an acceptable fallback behaviour, using the #media query to assign styles to elements in the event the hover capability isn't available in the browser. Your specific solution may need a different approach if you want something more like the desktop behaviour on mobile devices (e.g., CSS rules applied to active elements on a touch event).