Add keyboard navigation to Sooperthemes Premium Portfolio

The Sooperthemes Premium Portfolio is based on the Cube Portfolio jQuery plugin, which does not support keyboard navigation.

The portfolio has very nice interaction on mouse over. Typically, triggering a mouseover state on focus allows you to tie in keyboard navigation. This is not working at present though. Perhaps a change in Chrome?

So if you cannot simulate a :hover state, the fall back choice is to simply add a hover class. In hind sight, if the jQuery plugin had targeted .hover instead of :hover, the plugin would be ready for keyboard navigation almost out of the box.

In my case, I am using the pushTop caption style. So I just made changes for that. If you are using a different style, you will need to update the corredsponding CSS. Also, in my case, I am using the Search filter. The CSS file in use is

cubeportfolio-sooperthemes-custom-search-popup.min

You will have to unminimize the CSS to edit it. Locate the .cbp-caption:hover rule for your caption style (e.g., .cbp-caption-pushTop) that performs the animation. Duplicate the selector and change :hover to .hover, like so:

.cbp-caption-pushTop .cbp-caption:hover .cbp-caption-defaultWrap,
.cbp-caption-pushTop .cbp-caption.hover .cbp-caption-defaultWrap {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.cbp-caption-pushTop .cbp-caption:hover .cbp-caption-activeWrap,
.cbp-caption-pushTop .cbp-caption.hover .cbp-caption-activeWrap {
    -webkit-transform: translateY(-99%);
    transform: translateY(-99%)
}

This will allow the transition to occur when the caption has the hover class. You will add some jQuery to make this happen. Asset Injector is a good way to add javascript.

jQuery(function() {
  jQuery('.teams').on('focus blur', '.cbp-caption', function (e) {
    if( e.type == 'focusin' ){
      jQuery(this).addClass('hover');
      console.log('focusin (focus)');
    }
    else{
      jQuery(this).removeClass('hover');
      console.log('focusout (blur)');
    }
  });
});

In the javascript above, I’m using .teams to target the affect since my view is identified with the teams class.

One final step remains. The transition eases the content in with a second animation.

This is in sooperthemes-portfolio.css. Find the .cbp-caption:hover .sp-cpb-caption-fields-animation line and make a similar change:

.cbp-caption:hover .sp-cpb-caption-fields-animation .cbp-l-caption-body>*,
.cbp-caption.hover .sp-cpb-caption-fields-animation .cbp-l-caption-body>*
    {
    opacity: 1;
    transform: translateY(0)
}