CSS: no funciona el hover en iOS Safari y Chrome

Tengo un div networkingondeado que tiene una image networkingondeada y un título en la parte inferior con opacity: 0.5; Al desplazarse, la opacidad debería ser 1. Se perfila bien en todos los browseres de escritorio y Firefox para iOS, pero no funciona en Safari ni Chrome para iOS.

Violín: https://jsfiddle.net/a10rLbnL/2/

HTML:

 <div class="video_wrap update"> <div class="content"> <div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div> <div class="title_wrap"><div class="title">bang bang</div></div> </div> </div> 

CSS:

 .video_wrap { display: inline-block; width: 30%; padding-bottom: 30%; margin: 0 1%; position: relative; vertical-align: top; } .content { position: absolute; height: 100%; width: 100%; } .img_wrap { height: 100%; border-radius: 120px; overflow: hidden; } .title_wrap { line-height: 50px; top: -50px; height: 50px; position: relative; left: 0px; background: #fff; color: #f8008c; font-size: 12px; text-align: center; cursor: default; opacity: 0.5; transition: all .5s ease-in; min-height: 50px; } .img_wrap img { height: 100%; cursor: pointer; } .title_wrap:hover {opacity: 1} 

Encontré una solución: si agrega onclick="" al div, el activador funcionará.

Su html sería:

 <link rel="stylesheet" href="hover.css" type="text/css"/> <div class="video_wrap update"> <div class="content"> <div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div> <div class="title_wrap" onclick=""><div class="title">bang bang</div></div> </div> </div> 

El browser iOS necesita un elemento que se pueda hacer clic de forma pnetworkingeterminada. Si usa HTML5, puede cambiar el div del wrapper a a-tag :

<a href="javascript:void(0);" class="title_wrap"><div class="title">bang bang</div></a>

y establézcalo en un elemento de bloque:

 .title_wrap { ... display:block; } 

Si no usa HTML5, debe cambiar el <div class="title"> a un elemento en línea como <span class="title"> para que el código sea válido.