Overlay effect works with mouse but not with keyboard - html

Question

Here is my problem. I'm building portfolio page, and now I want to make it easy to navigate for people that can't use the mouse.
What does the outline property do? It provides visual feedback for
links that have "focus" when navigating a web document using the TAB
key (or equivalent). This is especially useful for folks who can't use
a mouse or have a visual impairment. If you remove the outline you are
making your site inaccessible to these people.
I built it so you can navigate all the links on my page using TAB key and you can open that link using ENTER key.
But...
I have nice visual effect with overlay. You can see images of apps, and only when you hover the mouse above that picture you can see links.
So TAB is working and you can select a link using keyboard but you can't see active links, because that overlay effect works only with the mouse (while mouse is hovering above particular picture).
It is hard to explain by words, so I recorded a short video:
https://youtu.be/IQbXL7iyG6w?t=5
Any idea how to fix this? Overlay effect should be tiggered by TAB navigation as well.
GitHub code:
https://github.com/elminsterrr/portfolio

Answer 1

You can do this with a simple jquery code. First change your css
CSS
change this:
#portfolio .inner-content:hover .overlay-content {
top: 0px;
z-index: 1;
background: rgba(0,0,0,0.9);
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}
with:
#portfolio .inner-content:hover .overlay-content {
top: 0px;
z-index: 1;
background: rgba(0,0,0,0.9);
}
#portfolio .inner-content .overlay-content.focus_test{
top: 0px;
z-index: 1;
background: rgba(0,0,0,0.9);
}
jQuery:
$('.overlay-content p a').focus(function(){
$(this).parents('.overlay-content').addClass('focus_test');
});
$('.overlay-content p a').blur(function(){
$(this).parents('.overlay-content').removeClass('focus_test');
});

Answer 2

You're showing your overlay on :hover when using TAB the elements get focused, so you have to add the :focus selector to your css for your overlay to show.
.my-class:hover .my-overlay { ... } => .my-class:focus .my-overlay, .my-class:hover .my-overlay { ... }