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:

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).
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.

MohammadReza Mahmoudi · Accepted Answer · 2016-08-24T13:21:23.317

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/

Even though this works, it requires the user to use JavaScript while the solution can be achieved with pure CSS though the `:focus` pseudoclass. — roberrrt-s, Aug 23 '16 at 13:51
Thank you for your reply Mohammad. So far I decided to adopt this method but still need a bit help on the jquery. Actually, I have more than one .my-item in the section my-work-area. So I need the hover effects to be deactivated when clicking or tapping on the same .my-item for the second time or outside of it. Any ideas of modifying the script? Thanks a lot. — Devin Michaelson, Aug 24 '16 at 12:54
@DevinMichaelson Did you test this code? the effect is deactivated after click. and also if the accepted answer is not working you have to change the marked answer. — MohammadReza Mahmoudi, Aug 24 '16 at 13:08

score 0 · Answer 2 · answered Aug 23 '16 at 13:47

0

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);
}

answered Aug 23 '16 at 13:47

roberrrt-s

7,914
2
46
57

Thanks Robert. Never knew it's simple like that. I thought it requires javascript to achieve my goal. – Devin Michaelson Aug 23 '16 at 14:21
1

If you agree this solution is the best one there is, you can 'accept' this answer as your definitive answer ;). – roberrrt-s Aug 23 '16 at 14:30
I've added :focus pseudo according to your suggestion and tested on Chrome Inspect, but the links are still accessed when tapping on the middle of the image. Did I do something wrong? – Devin Michaelson Aug 23 '16 at 14:49
This happens because the links are not visible, but they are still there, a possible solution is to remove pointer events in css if they're not visible. I'll update my code with a solution – roberrrt-s Aug 23 '16 at 14:53
So... What should I do m8? I'm ok with Mohammad's answer regardless javascript because I still have javascript in my code anyway. – Devin Michaelson Aug 23 '16 at 15:26
I've tried some solutions with display: none; on the , but for some reason it still clicks, i'm poking around atm. – roberrrt-s Aug 23 '16 at 19:02

Enable :hover effect on a touch screen environment

2 Answers2