[Resolved] Spring/Bounce Hover Effect on links

Home Forums Support Spring/Bounce Hover Effect on links

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1406206
    Ireneusz

    Hi Guys,

    I’m trying to highlight links to stand out more in the content area.

    Currently I’m on:

    #content a {
        font-weight: bold !important;
    }

    but I’m wondering how can I transplant code from https://codepen.io/markmead/pen/drORWG without breaking the site.

    Thank you so much for any help!

    #1406407
    David
    Staff
    Customer Support

    Hi there,

    that Code needs just a couple of tweaks – try this:

    .entry-content p a {
        position: relative;
        overflow: hidden;
        text-decoration: none;
        color: #ec407a;
    }
    
    .entry-content p a::after {
        content: "";
        background: rgba(236, 64, 122, 0.25);
        position: absolute;
        left: 12px;
        bottom: -6px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        z-index: -1;
        -webkit-transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
        transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
        z-index: 1;
    }
    
    .entry-content p a:hover:after {
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 100%;
    }
    #1406737
    Ireneusz

    Hello David,

    Works perfectly! The only question I have is regarding .entry-content. How can I tell what is covered by that, or where can I find the other div classes and their respective content?

    For example, with .entry-content when a heading is a link the effect is not applied. Should I then duplicate the code changing .entry-content for X that involves only headings or is there a simpler way?

    Thank you for your input!

    #1406948
    David
    Staff
    Customer Support

    Easiest way is to use the browser developer tools.
    Right Click and Inspect the element to open the tools and display its whereabouts in the Elements tab.

    entry-content comes after the entry-header which is where the Post title and Meta are displayed.

    The above code will only effect an <a>nchor that is within a <p>aragraph found within the entry-content. So no links inside other elements such as <h2> heading

    #1407225
    Ireneusz

    Thank you for your help, David! It’s clear now.

    #1407422
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.