Как включить сенсорный слайд для HTML-элемента, используя эффекты перехода / преобразования Hover CSS3?

Question

Как включить сенсорный слайд для HTML-элемента, используя эффекты перехода / преобразования Hover CSS3?

0

Я хочу включить touch на мобильное устройство и нести тот же эффект (или что-то подобное), затем он наводил состояние на элемент HTML.

У меня есть изображение, которое при наведении применяется переход CSS3 transformX(). Я хочу добиться того же, что и для мобильных устройств, но просто с помощью слайда влево (или нажатия на него).

Возможно ли это с помощью CSS3/HTML? Если нет, какую конкретную jQuery сенсорную библиотеку вы рекомендуете использовать?

Вот моя скрипка: http://jsfiddle.net/gT47d/12/

HTML

<a href="http://google.com" class="slide transform multi">
<img src="http://media02.hongkiat.com/fruits-vege-stock-photos/highres/orange-stock04.jpg" />

<div class="info">Fruit Info</div>  
</a>

CSS

a.slide{
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
}
.transform {
    overflow:hidden;
}
.info{
    color:#FFF;
    font-family: arial;
    position: absolute; 
    width: 100%; 
    padding: 10px; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0.6);
}
.transform img {
    position: relative;
    z-index: 5;
    width: 100%;
    height: auto !important;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.transform:hover img {
    transform: translateX(90%);
    opacity: .4;
}
.multi{
    background: url(http://media02.hongkiat.com/fruits-vege-stock-photos/highres/fruitsvege-stock37.jpg); 
    background-size:cover;
}

iammikerodriguez 08 май 2014, в 06:02

Источник

Теги:

jquery

html

css

css3

touch

1 ответ

Ещё вопросы

Imran Bughio · Answer 1 · 2014-05-08T02-24-00.000Z

DEMO

Однократное нажатие может быть достигнуто с помощью трюка :focus.
Я также перемещал изображение со стороны якоря, чтобы лента не открывала ссылку.

HTML:

<div class="slide transform multi">
    <img src="http://media02.hongkiat.com/fruits-vege-stock-photos/highres/orange-stock04.jpg" />
    <a href="http://google.com" class="">
        <div class="info">Fruit Info</div>
    </a>
</div>

Css:

.transform {
  overflow:hidden;
  height: auto;
}
.info{
    color:#FFF;
    font-family: arial;
    position: absolute; 
    width: 100%; 
    padding: 10px; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0.6);
}
.transform img {
    position: relative;
    z-index: 5;
    width: 100%;
    height: auto !important;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.transform:hover img, .transform:focus img, .transform img:focus {
  transform: translateX(90%);
    opacity: .4;
}
.multi{background: url(http://media02.hongkiat.com/fruits-vege-stock-photos/highres/fruitsvege-stock37.jpg); background-size:cover}

Спасибо @ Имран Бугио. Не совсем то, что я ищу, хотя. Не работает при тестировании на iPhone / iPad.