I would like to share some code with you:
HTML
<a href="#" class="button">button</a>
<div class="holder">
<img src="http://placehold.it/350x150" />
<div class="content">
<h3>hello there</h3>
<a href="#">view more</a>
<div/>
</div>
CSS
.holder {
margin-top: 130px;
position: relative;
}
img {
position: relative;
display: block;
transition: -webkit-transform 0.5s;
transition: -moz-transform 0.5s;
z-index: 10;
}
.content {
background: blue;
height: 100%;
color: white;
z-index: 1;
position: absolute;
top: auto;
bottom: 0;
}
a {
color: white;
background: red;
padding: 10px;
}
.holder:hover img {
-webkit-transform: translateX(90px);
-moz-transform: translateX(90px);
}
.button {
background: green;
position: absolute;
top: 10px;
}
JQuery
if (Modernizr.touch) {
alert("touch support");
}
else {
alert("no touch support");
$('.button').toggle(
function(){
$('img').css({
'-webkit-transform' : 'translateX(90px)',
'-moz-transform' : 'translateX(90px)'
});
},
function(){
$('img').css({
'-webkit-transform' : 'translateX(-90px)',
'-moz-transform' : 'translateX(-90px)'
});
});
}
The intention behind the code is to change the image position on hover for non-touch devices and replicate this behavior using jQuery for touch devices due to limitations of the hover event on such devices.
My queries are as follows: 1) Is this code accurate? 2) The jQuery snippet seems to make the button disappear instead of moving the image position.
You can view the CSS implementation here: jsfiddle-css
Here is the attempt to replicate it with jQuery, which is currently not functioning as expected: jsfiddle with jquery