[Resolved] How can I apply this CSS style for my in-posts links?

Home Forums Support How can I apply this CSS style for my in-posts links?

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1332275
    Peter Paul

    Hi GP Team,

    I saw this cool style / animation effect for links just using CSS.
    https://codepen.io/NickNoordijk/pen/QbEZQG

    I’ve been trying to incorporate it in GP theme, but I can’t seem to make it work.
    Can you help me out how to properly incorporate this effect?
    What are the values I should replace?
    Just for the links inside the content or posts.

    Thanks,
    Peter

    #1332336
    David
    Staff
    Customer Support

    Hi there,

    try:

    .single .entry-content a {
      color: transparent;
      display: inline-block;
      overflow: hidden;
      position: relative;
      text-decoration: none;
      text-shadow: 0 0 #141414, 0.08em 0 0 #fff, 0 0, -0.08em 0 0 #fff;
      vertical-align: bottom;
    }
    .single .entry-content a:after {
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 20, 20, 0.8)), to(rgba(20, 20, 20, 0.8))) center 1.08em/100% 2px no-repeat;
      background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 2px no-repeat;
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0.25em;
      width: 400%;
      will-change: transform;
      pointer-events: none;
    }
    .single .entry-content a:hover:after {
      -webkit-animation: underline-gradient 6s linear infinite;
              animation: underline-gradient 6s linear infinite;
      background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(122, 95, 255, 0.8)), color-stop(35%, rgba(1, 255, 137, 0.6)), color-stop(85%, rgba(122, 95, 255, 0.8)));
      background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
    }
    
    @-webkit-keyframes underline-gradient {
      0% {
        -webkit-transform: translate3d(0%, 0%, 0);
                transform: translate3d(0%, 0%, 0);
      }
      100% {
        -webkit-transform: translate3d(-75%, 0%, 0);
                transform: translate3d(-75%, 0%, 0);
      }
    }
    
    @keyframes underline-gradient {
      0% {
        -webkit-transform: translate3d(0%, 0%, 0);
                transform: translate3d(0%, 0%, 0);
      }
      100% {
        -webkit-transform: translate3d(-75%, 0%, 0);
                transform: translate3d(-75%, 0%, 0);
      }
    }
    #1332461
    Peter Paul

    Hi David,

    Thank you very much for that! It worked! 🙂
    But I noticed that they also appear on images that have links or are linked.
    Is there a way to just apply this to text links only?

    Thank you!

    #1332465
    David
    Staff
    Customer Support

    Yeah its why Link Styling is such a pain.
    Can you link me to a post where i can see an image with a link?

    #1332489
    Peter Paul

    I’m sorry about that.

    Here’s an example: https://thepcenthusiast.com/razer-kishi-game-controller-for-android-now-available/
    It appears on the three images in the middle of the article.

    #1332506
    Peter Paul

    Just a follow up, if it’s more difficult or complicated to exclude.
    Perhaps we can move or align the line effect at the bottom of the image instead?

    #1332571
    David
    Staff
    Customer Support

    Hmmm…. tricky one.
    Try adding this:

    a[href^="https://cdn"]:after {
        display: none !important;
    }

    It assumes all those image links are for the lightbox and therefore served over a CDN….

    #1332611
    Peter Paul

    It is tricky!
    Unfortunately, that didn’t seem to work.

    I saw a similar effect on Cloudway’s site here https://support.cloudways.com/how-do-i-take-my-website-live-from-cloudways/
    The the line effect shows up under the (link) image.
    But I wasn’t able to replicate it despite inspecting and copying their code.

    #1332653
    David
    Staff
    Customer Support
    #1332659
    Peter Paul

    I add all the CSS under Customizing -> Additional CSS.

    I didn’t use Simple CSS plugin or child theme.
    Should I?

    #1332661
    David
    Staff
    Customer Support

    Can you add it back in, and place it after all the other CSS. Then i can take a look to see why it isn’t working.

    #1332676
    Peter Paul

    Sorry about that. It looks like it is now working.
    I added it back, cleared cache, cleared WP rocket, and it’s now working!
    The lines no longer appear -> https://thepcenthusiast.com/razer-kishi-game-controller-for-android-now-available/

    Thank you very much!

    #1332684
    David
    Staff
    Customer Support
    #1333010
    Peter Paul

    Hi David,

    Sorry to open again this thread. But I noticed that not only the images are affected by the style.
    There are other text links that are affect.
    I tried to research about CSS exclusion, but since I am not knowledgeable in this field, I’m not really sure how to implement it.

    If you visit this page: https://thepcenthusiast.com/intel-core-i7-10700k-review/
    You can see that the table of contents are affected with the effect.
    Also if you scroll down, the CSS for the in page pagination (nextpage) are over ruled.
    The page numbers 1 or 2 doesn’t look right.

    Any idea how to exclude them or at least prevent the effect from affecting this elements?

    Thanks,

    #1333307
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You’ll need to target those items manually and remove the effect.

    For example:

    .single .entry-content .ftwp-item a:after,
    .single .entry-content .page-links a:after {
        display: none;
    }
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.