[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
    Posts
  • #683206
    Krzysztof

    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
    #683453
    Tom
    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 ๐Ÿ™‚

    #683558
    Krzysztof

    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

    #683695
    David
    Staff
    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?

    #683700
    Krzysztof

    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.

    #684129
    Tom
    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
    </a>

    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.