Recent Posts Hover Customization

[rsoffia]

Hi, I’m using the Recent Posts asset and I’ve customized the CSS to make the overlay effect looks exactly like I want it. Only problem is: I had to push t <figure class=”animated-overlay”> back, therefore I lost the link to the item.

(I also modified the functions.php to make thumbnail images regular size)

Is there a way to achieve the same effect without losing the link? I guess I would need to modify the template structure, for example: having the link nested directly inside

<div itemscope class=”recent-post has-thumb carousel-item clearfix>

instead of

<figure class=”animated-overlay”>

but don’t know if that is possible, or how to do it. I’m not a developer (yet).

[David Martin – Support]

Hi,

When overwriting functions or theme files, please do this with a child theme. We supply one with the theme package for this reason.

You cannot do this whilst you have, please remove that:

.recent-post figure {
    z-index: -1;
}

Thanks.

[rsoffia]

Hi David,

I am using a child theme, I was not aware that you provide one within the package, though. I set up one using Child Theme Generator Plugin.

Anyway, I know I need to remove

.recent-post figure {
    z-index: -1;
}

in order to keep the link to the post. But then, my custom hover effect would turn invisible. At the moment, I’m at a point where I’m forced to choose between desired look or functionality. What would be the way of getting both?.

You provided a piece of code for @bluecoaches on this other topic (very useful I must say). I thought maybe there’s a similar workaround for my enquiry here.

[David Martin – Support]

Hi,

What is the hover effect you are trying to implement?

Are you simply looking to hide the red overlay and right icon arrow on hover?

Please provide further details, or a mockup of what you are trying to do.

– David.

[rsoffia]

I’m sorry, I thought I had provided the url at first place, for reference.

This is it: http://kinetecnics.cl/wp2/fisiologia/

On normal state, I want the name of the item to be displayed as a block with a white transparent background over the bottom portion of the image (covering about 1/5 of the total area)

On hover, the name and its background should animate downwards and stay hidden.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Unfortunately that customisation is beyond our scope of support as it is more work than a small customisation. We only provide support for theme issues, and at times basic customisations. While we’d love to be able to support every customisation request, we simply don’t have the time. We recommend that you seek a freelance developer if you need to make that customisation

– Kyle

[rsoffia]

Oh, I understand. I thought I might ask anyway because sometimes I don’t know if what I’m after is a small or big thing.

Do you know which specific file should the developer (or myself) look for?
Is “widget-posts.php” maybe? or some other? I have no idea.

Thanks.

[Kyle – SUPPORT]

Go to cardinal/woocommerce/content-product.php

– Kyle