css transition on the Ipad with text - html

Question

I am working on a project for my self. I made some img with a hover transition.
It works perfect in all browsers. But not on the ipad. Why? For some reasons i cant click on the the image because of the text. I dont know why that is. I got 2 examples:
Example 1:
http://jewelbeast.com/imghover/ If you test this 1 on the ipad and you click on the img. You will see that nothing happends. Because the text in Centered with vertical align and with text-align:.
Example 2
http://jewelbeast.com/imghover/test.html if you test this 1 on the ipad you can click on the right side of the image. Because there is no text on the right side.
CSS
div.hover-img-vertical-smallborder{
margin-top: 25px;
height: 400px;
width: 228px;
float: left;
display: block;
margin-left: 10px;
}
div.hover-img-vertical-smallborder section{
position: relative;
width: 217px;
height: 350px;
border: 5px solid white;
outline: 1px solid #c8c8c8;
float:left;
text-align: center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
overflow: hidden;
background: #dfdfdf;
}
div.hover-img-vertical-smallborder section:hover{
height: 380px;
margin-top: -15px;
}
div.hover-img-vertical-smallborder section img{
position: absolute;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
div.hover-img-vertical-smallborder section .text{
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
}
div.hover-img-vertical-smallborder section span{
width: 200px;
display: table-cell;
vertical-align: middle;
padding: 20px;
text-align: center;
color: black;
opacity: 0;
text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
div.hover-img-vertical-smallborder section:hover span{
opacity: 1;
}
div.hover-img-vertical-smallborder section:hover img{
opacity: 0.5;
}
div.hover-img-vertical-smallborder section span h1{
width: 100%;
text-align: center;
font-size: 18px;
font-family: Verdana, sans-serif;
font-weight: bold;
line-height: 25px;
margin-bottom: 3px;
}
div.hover-img-vertical-smallborder section span p{
width: 100%;
text-align: center;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
margin-bottom: 10px;
}
div.hover-img-vertical-smallborder section span a.button{
display: table;
margin: 0px auto;
text-align: center;
color: white;
text-shadow: none !important;
text-decoration: none;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
padding: 9px 10px 11px 10px;
border: 1px solid #616161;
outline: 1px solid #000000;
background: #494949; /* Old browsers */
background: -moz-linear-gradient(top, #494949 1%, #3a3a3a 94%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(94%,#3a3a3a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* IE10+ */
background: linear-gradient(to bottom, #494949 1%,#3a3a3a 94%); /* W3C */
}
div.hover-img-vertical-smallborder section span a.entire{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
HTML
<div class="hover-img-vertical-smallborder">
<section class="bg-black"> <!-- bg-black is a black background on hover normal is grey -->
<img src="img/img_5.jpg" style="left: -50%;"/>
<div class="text">
<span>
<h1>This is a title</h1>
</span>
</div>
</section>
</div>
I hope somebody can figure this out.
Thanks.

Answer 1

There is no hover event fired on a touch device. You need to use either one of these events in JS:
touchstart
touchmove
touchend
touchcancel