Hi,

1) That feature is not enabled by default, so you can simply add the following style in Appearance > Customize > Additional CSS to achieve it.

.o-neuron-hover-holder:hover .o-neuron-hover-holder__header .o-neuron-hover-holder__header__overlay,
.o-neuron-hover-holder:hover .o-neuron-hover-holder__body-meta {
    opacity: 0 !important;
}

2) I'm not sure exactly where is that coming, I may need an URL to check what's going on.

3) Well the ratio of the boxes will depend on the image size, you can add custom sizes to the thumbnail section on the posts element, from there you can specify the image width & height. https://prnt.sc/ppk1nz

Feel free to ask for anything you need.

Kind Regards

Hi,

Good to know, feel free to ask for anything you need.

Well, the thumbnails are generated only when you upload an image, so the image size that you have specified is created after the images are uploaded, you need to regenerate the thumbnails to make them work alright.

- https://wordpress.org/plugins/regenerate-thumbnails/

One thing that you need to make sure is that your image is larger than the resolution you're trying to achieve, because it will not be able to crop what is larger than it's actual size.

Kind Regards

Hey,

Please replace the old CSS with the one below.

.o-neuron-hover-holder:hover .o-neuron-hover-holder__body-meta {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition-duration: 0.3s !important;
}

Feel free to ask for anything you need.

Kind Regards

Hi,

Actually, I've send you the translate effect, that's the problem. It requires lot of extra work to achieve something like that, it's a lot easier with jQuery. So, please install the following plugin.

- https://wordpress.org/plugins/insert-headers-and-footers/

The following jQuery:

<script>
jQuery(function($) {
  $('.o-neuron-hover-holder')
    .mouseenter(function() {
      $(this).removeClass('o-neuron-hover-holder--active');
    })
    .mouseleave(function() {
      $(this).addClass('o-neuron-hover-holder--active');
    });
});
</script>

And the following CSS:

.o-neuron-hover-holder:hover .o-neuron-hover-holder__header .o-neuron-hover-holder__header__overlay,
.o-neuron-hover-holder:hover .o-neuron-hover-holder__body-meta {
    opacity: 0 !important;
}

Kind Regards

Hi,

Good to know that you managed to solve the issue for the selected pages.

As for the transition delay, you can add easily the following style.

.o-neuron-hover-holder:hover .o-neuron-hover-holder__header .o-neuron-hover-holder__header__overlay {
    transition-delay: 1s !important;
}

Feel free to ask for anything you need.

Kind Regards

Hi,

That's the code that I have already pasted in Appearance > Customize > Additional CSS, but here it is again.

.o-neuron-hover .o-neuron-hover-holder .o-neuron-hover-holder__header__media img, 
.l-posts-wrapper .o-neuron-hover-holder__header__overlay {
    transition-delay: 0.5s !important;
} 

Kind Regards

Hi,

Simply the transition is different on the image, so add this to the image only.

.o-neuron-hover .o-neuron-hover-holder .o-neuron-hover-holder__header__media img {
    -webkit-transition: all 8s linear !important;;
    -o-transition: all 8s linear !important;;
    transition: all 8s linear !important;;
}

And for content you can leave 0.5s.

.l-posts-wrapper .o-neuron-hover-holder__header__overlay {
    transition-delay: 0.5s !important;
} 

Feel free to ask for anything you need.

Kind Regards

Good to know, let me know if I can help you on anything else

Kind Regards