Docs

[David]

Hello,

I would like to animate my feature-box image with the same hover effect that recents posts have. I really like that red box that fades and drops down. Is there a way to do that with custom css or js?

I’ve seen two different articles on similar questions. One adds a swing to the image use js:

(function($){
$(‘.x-feature-box’).each(function(){
$(this).hover(function(){
$(this).find(‘.x-feature-box-graphic-outer’).addClass(‘animated swing’);
}, function(){
$(this).find(‘.x-feature-box-graphic-outer’).removeClass(‘animated swing’);
});
});
})(jQuery);

Another adds an opacity using css.

.x-recent-posts a:hover img {
opacity: 0.2 !important;}
.x-recent-posts a:hover .x-recent-posts-img {
background-color: #000000 !important;}
.x-recent-posts .h-recent-posts {
font-size: 30px !important;}
.x-recent-posts .x-recent-posts-date {
font-size: 20px !important;}

But which will add the red box dropdown?

Thank you

David

[Rupok]

Hey there,

Thanks for writing in! It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts