[Resolved] Link hover animation in text and title

Home Forums Support Link hover animation in text and title

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1474001
    Bogdan

    Hello

    I’ve added this menu hover animation from your documentation:

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item > a::after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 15px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    
            display: block;
            width: 0;
            height: 2px;
            color: #E0202C;
            background-color: currentColor;
            transition: 0.3s width ease;
        }
        .main-navigation .menu > .menu-item.current-menu-item > a::after,
        .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
        .main-navigation .menu > .menu-item > a:hover::after {
            width: 50%;
        }
    }

    It works great and looks neat.
    Now I want to add the same effect for the links inside every article and for the header links (like the ones on the home page, category pages, archives, etc.)
    Can you please help me do that?

    My site is Optimize My Life

    #1474005
    Bogdan

    PS: I’ve just noticed that the navigation search stopped working after adding the above css. How can I fix that?

    #1474020
    Elvin
    Staff
    Customer Support

    Hi,

    Now I want to add the same effect for the links inside every article and for the header links (like the ones on the home page, category pages, archives, etc.)
    Can you please help me do that?

    You can try this out.

    @media (min-width: 769px) {
    /* for articles */
    article > .inside-article a{
    	position:relative;
    }
    article > .inside-article a:after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 0px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            display: block;
            width: 0;
            height: 2px;
            color: #E0202C;
            background-color: currentColor;
            transition: 0.3s width ease;
        }
        
    article > .inside-article a:hover:after {
            width: 50%;
    }
    /* For page hero*/
    .page-hero a{
    	position:relative;
    }
    
    .page-hero a:after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 0px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            display: block;
            width: 0;
            height: 2px;
            color: #E0202C;
            background-color: currentColor;
            transition: 0.3s width ease;
        }
        
    .page-hero .inside-article a:hover:after {
            width: 50%;
    }
    }

    Please do mention if I missed anything you want this applied to. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1474387
    Bogdan

    Hi Elvin,

    this does work, but it also adds the same effect to almost everything else that is clickable, including images and buttons (which looks weird). I want to exclude such elements and have it only appear for the links in the text and the headers.

    #1474505
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (min-width: 769px) {
        .entry-content p > a,
        .page-hero a {
            position:relative;
        }
        .entry-content p > a:after,
        .page-hero a:after {
                content: "";
                position: absolute;
                right: 0;
                left: 50%;
                bottom: 0px;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                display: block;
                width: 0;
                height: 2px;
                color: #E0202C;
                background-color: currentColor;
                transition: 0.3s width ease;
            }
            
        .entry-content p > a:hover:after,
        .page-hero a:hover:after {
                width: 100%;
        }
    }
    #1475124
    Bogdan

    Thank you David!

    This works great for the links inside the posts.
    Is there a way to add the same effect if you hover over the post titles on the home page or category pages?

    #1475442
    Elvin
    Staff
    Customer Support

    You can try this code. This specifically targets the post titles on home and any archive pages.

    @media (min-width: 769px) {
    /* for articles */
    article.post > .inside-article > .entry-header > .entry-title > a{
    	position:relative;
    }
    article.post > .inside-article > .entry-header > .entry-title > a:after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 0px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            display: block;
            width: 0;
            height: 2px;
            color: #E0202C;
            background-color: currentColor;
            transition: 0.3s width ease;
    }
        
    article.post > .inside-article > .entry-header > .entry-title > a:hover:after {
            width: 50%;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1475737
    Bogdan

    Thanks Elvin, that code does the job quite well.

    Just one small problem: for longer titles, only the text on the second row gets animated
    like this
    Link animation

    Is there a way to fix that?

    #1476118
    David
    Staff
    Customer Support

    Nothing can be done to fix that.
    The closest you can get is an underline expanding from start to end using this CSS:

    article.post>.inside-article>.entry-header>.entry-title>a,
    .entry-content p>a,
    .page-hero a {
        text-decoration: none;
        background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
            linear-gradient(#c73337, #c73337);
        background-size: 100% 2px, 0 2px;
        background-position: 100% 100%, 0 100%;
        background-repeat: no-repeat;
        transition: background-size 0.2s linear;
    }
    
    article.post>.inside-article>.entry-header>.entry-title>a:hover,
    .entry-content p>a:hover,
    .page-hero a:hover {
        background-size: 0 2px, 100% 2px;
    }
    #1476354
    Bogdan

    Got it. That’s not such a problem.

    Thank you both for helping me out.

    #1476470
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.