How to make CSS transition work with focus instead of hover?

Question

I have a simple CSS transition which increases the size of an element on hover. I would like to do the same but on focus, because the UI will be controlled through keyboard only. How can I do that? If I change :hover to :focus it does not work.

  .card {
         height: 200px;
         width: 140px;
        /* margin: 20px;*/
         overflow: hidden;
         transition: box-shadow 0.15s ease-out, transform 0.25s ease;
         perspective: 600px;
         border-radius: 5px;
        
    }
     .card:hover {
         transform: scale(1.1);
         box-shadow: none;
    }
     .card.hover--ending {
         transition: box-shadow 0.5s ease;
    }

    <a href="/hello">
      <article class="card">
         <image type="image" src="https://icdn6.digitaltrends.com/image/google_1998-316x95.jpg" class="card__image posterImage focusable" />
      </article>
    </a>

The href. The client will use the keyboard(i.e. tab ). The scope is to create an UI navigable using the keyboard and provide some transition effects to emphasize the focused element. — mike, Mar 31 '18 at 22:05

score 0 · Accepted Answer · answered Mar 31 '18 at 22:06

0

You focus the <a>, not the .card.

Try changing the selector. From (what would be):

.card:focus {

To:

a:focus .card {

Demo:

.card {
     height: 200px;
     width: 140px;
    /* margin: 20px;
     */
     overflow: hidden;
     transition: box-shadow 0.15s ease-out, transform 0.25s ease;
     perspective: 600px;
     border-radius: 5px;

}
a:focus .card {
     transform: scale(1.1);
     box-shadow: none;
}
 .card.hover--ending {
     transition: box-shadow 0.5s ease;
}

<input value="click me and hit tab">
<a href="/hello">
<article class="card">
      <image type="image" src="https://icdn6.digitaltrends.com/image/google_1998-316x95.jpg" class="card__image posterImage focusable" />
 </article>
 </a>

answered Mar 31 '18 at 22:06

acdcjunior

132,397
37
331
304

`a:focus`? What is it supposed to do? :D – nicael Mar 31 '18 at 22:08
Hum... focus on the ``? – acdcjunior Mar 31 '18 at 22:08
1

Oh - I see; I'm not used to the fact `a` could gain a focus, I believe it's not a standard behaviour. (or maybe that's just because I'm a Mac user; it doesn't work here in Safari and Firefox for Mac at least) – nicael Mar 31 '18 at 22:10
1

Really? As far as I know they are focusable (like when you start to hit tab on a google results page). [This answer from 2009](https://stackoverflow.com/a/1600194/1850609) seems to confirm my "feeling". – acdcjunior Mar 31 '18 at 22:13
@nicael so how could someone navigate using a keyboard only(no mouse) ? – mike Mar 31 '18 at 22:15

How to make CSS transition work with focus instead of hover?

1 Answers1