[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
  • #1406206

    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!

    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%;

    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!

    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


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

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