<html>
<head>
<style>
.conthome {
display: flex;
flex-flow: wrap;
flex-direction: row;
justify-content: space-between;
padding-left: 80px;
padding-right: 80px;
text-align: center;
margin-bottom:50px;
}
.row1home {
width:23%;
float:left;
position:relative;
}
.riquadro {
position:relative;
}
.caption {
background-color: rgba(0,0,0,0.75);
position: absolute;
color: #fff;
font-weight: 600;
z-index: 100;
padding: 50 50;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/* Subclass of imageContainer*/
.overlayText{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
opacity:0;
background:#000000;
color:#ffffff;
text-align:center;
font-size:20px;
transition:0.5s ease-in;
-webkit-transition:0.5s ease-in margin:0;
padding:10px;
margin:0px;
}
.overlayText:hover {
opacity: 0.7;
cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div class="conthome">
<div class="row1home"><h3>TITOLO</h3>
<div class="riquadro">
<a href="http://www.ciao.it"><img src="http://www.sailcoolroute.eu/wp-content/gallery/gallery/cool-route-img-5.jpg">
<p class="overlayText">Descrizione</p>
</a>
</div>
</div>
</div>
<script>
$(".riquadro a").on('dblclick', function () { // Mobile browsers only
alert("dblclick");
window.location = this.href;
});
$(".riquadro a").on('doubletap', function () { // Mobile browsers only
alert("doubletap");
window.location = this.href;
});
</script>
</body>
</html>
