[Support request] Animation on hover

Home Forums Support [Support request] Animation on hover

Home Forums Support Animation on hover

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #683206

    Hello, I am not particularly good with CSS, and would like to know, if there are some pointers that You can give me to achieve product site info looking similar to http://www.wellis.eu/products animations, when hovering over image.
    Currently I am using Elementor Pro in addition to Your theme.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    Lead Developer
    Lead Developer

    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

    Customer Support

    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.

    Lead Developer
    Lead Developer

    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

    Then give it some CSS:

    .category-block-link {
        display: block;
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.