Enable :hover effect on a touch screen environment

Question

First of all, this is what I'm talking about: jsfiddle.

When mouseover the image, you can see 4 icons appear while the image is zoomed in and the background of .my-caption turns darker. I've tested this on mobile but it didn't work fine as on desktop. The links under the icons were accessed at the same time of the hover effects as I tapped on the image. I want to make this friendly on touch-screen devices (both Android and iOS) too.

My goal:

1. When a user taps on the image, the hover effects are activated (icons show, image zoomed and darkened bg). And if the user taps on the image again or taps elsewhere outside the image, the hover effects are deactivated (back to normal state).
2. The links under the icons can be accessed only when the user taps on the icons (secondary tap).

How can I achieve this using CSS or simple JS? Thanks for your help.

ps. I must credit to Mary Lou for this awesome hover effect used.

Answer 1

Try this:

HTML:

<section class="my-work-area">
  <div class="my-item">
    <img src="http://i.imgur.com/PAj4Ky9.jpg">
    <div class="my-caption text-center">
      <figure class="effect-hera">
        <figcaption>
          <p>
            <a href="http://www.google.com" target="_blank"><i class="fa fa-moon-o"></i></a>
            <a href="http://www.yahoo.com" target="_blank"><i class="fa fa-smile-o"></i></a>
            <a href="http://www.apple.com" target="_blank"><i class="fa fa-star-o"></i></a>
            <a href="http://www.microsoft.com" target="_blank"><i class="fa fa-sun-o"></i></a>
          </p>
        </figcaption>
      </figure>
    </div>
  </div>
</section>

CSS:

.my-work-area {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.my-item {
  overflow: hidden;
  position: relative;
}

.my-item img {
  width: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.my-item.active img,
.my-item.active img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.my-item.active .my-caption {
  background: rgba(0, 0, 0, 0.75);
  visibility: visible;
}

.my-item .my-caption {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
  visibility: hidden;
}

.my-item .my-caption figure {
    position: relative;
    float: left;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.my-item .my-caption figure figcaption {
    padding: 2em;
    font-size: 3em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.my-item .my-caption figure figcaption::before,
.my-item .my-caption figure figcaption::after {
    pointer-events: none;
}

.my-item .my-caption figure figcaption,
.my-item .my-caption figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.my-item .my-caption figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.my-item .my-caption figure p {
    margin: 0;
    letter-spacing: 2px;
    font-size: 60%;
}

figure.effect-hera {
    background: transparent;
}

figure.effect-hera p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transition: opacity 0.35s, transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}

figure.effect-hera figcaption::before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
    transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}

figure.effect-hera p {
    width: 100px;
    text-transform: none;
    line-height: 1.8;
}

figure.effect-hera p a {
    color: linen;
}

figure.effect-hera p a:hover {
    color: gold;
}

figure.effect-hera p a i {
    font-size: 1.2em;
}

figure.effect-hera p a i {
    opacity: 0;
    -webkit-transition: opacity 0.35s, transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i {
    -webkit-transform: translate3d(-60px,-60px,0);
    transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i {
    -webkit-transform: translate3d(60px,-60px,0);
    transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i {
    -webkit-transform: translate3d(-60px,60px,0);
    transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i {
    -webkit-transform: translate3d(60px,60px,0);
    transform: translate3d(60px,60px,0);
}

.my-item.active figure.effect-hera figcaption::before {
    opacity: 1;
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
    transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

.my-item.active figure.effect-hera p i:empty {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
}

jQuery:

$('.my-item').on('click', function() {
    $('.my-item').removeClass('active');
    $(this).addClass('active');
});

$(document).on("click", function(e) {
    if (!($(e.target).is('.my-item') || $($(e.target).parents('.my-item')).is('.my-item'))){
    $('.my-item').removeClass('active');
  }
});

Demo: https://jsfiddle.net/gwuuzmah/5/

Answer 2

The ideal way to do this is to apply the same style to :focus as you do to :hover

.element {
  background-color: #F00;
}

.element:hover, .element:focus {
  background-color: #0F0;
}

How it should work in your code:

.my-item:hover img,
.my-item:focus img,
.my-item:active img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.my-item:hover .my-caption, .my-item:focus .my-caption {
  background: rgba(0, 0, 0, 0.75);
}