Animation on hover

Hi there,

We'd have to see the current HTML structure in order to know if CSS will work for you.

However, I believe Elementor Pro has built-in options that can achieve that kind of layout/animations. Have you tried their options yet?

Let me know :)

Hello Tom, thanks for response. I managed to get it to work *partly*, if it is OK, can You please take a look at my version of site, and maybe point my error in this hover? http://wellis.hdex.nazwa.pl/produkte

Hi there,

it looks good to me :) As Tom said it is an Elementor thing, so not sure how much we can do. But what is not right about your version?

Thanks for response. Well I managed to fix some things myself meantime, and no, it is not elementor, because they don't have required plugin combo for the issue here, I just put text in column and worked on CSS for this. Anyway, still no dot and line which should display before and after main h3. Also, is there a way to link this whole column to a specific product category page? Because I can't figure this one on my own, found the php href, but Elementor keeps deleting it from layout.

Give this a shot for the dot and line:

.main-cat div.category-item div.category-text h3:after {
    display: block;
    content: '';
    width: 0;
    margin: 0 auto;
    height: 2px;
    background-color: #cbb387;
    -webkit-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.main-cat div.category-item div.category-text:hover h3:after {
    width: 84px;
    margin: 15px auto;
}

.main-cat div.category-item div.category-text h3:before {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid #cbb387;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto;
    top: -17px;
    -webkit-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

As for the link, try wrapping all if it in an anchor (link) with a class:

<a href="#" class="category-block-link">
    HTML in here
</a>

Then give it some CSS:

.category-block-link {
    display: block;
}