• Hello @phenomlab

    I see this effect on link here.

    64ce4a20-4dbf-468f-9180-38e657810970-image.png

    I research how to do this or other effect and i found this code for example on css tricks

    a {
      position: relative;
    }
    
    a::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: red;
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
      }
    
    a:hover::before {
        color: red;
      transform-origin: left;
      transform: scaleX(1);
    }
    
    a:focus, a:hover {
        color: red;
    }
    

    The effect is good but he is active on reply button, quote, reply to, username and I don’t want that… Just on post (url, @mention)

    And you, what is your code ?


  • @DownPW

    reply to me, maybe .posts .content a:focus

    I will test 😉


  • @DownPW I also had some issues with this effect showing on unwanted elements, and off the top of my head I can’t recall the CSS I used, but will check.


  • @phenomlab

    .posts .content seems to be pretty good for me 😉


  • @DownPW said in hover link effect:

    @phenomlab

    .posts .content seems to be pretty good for me 😉

    it not worked on my web site.


  • @DownPW My CSS is as below

    .content p a:not(.noanimate):after {    
      background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 1px;
      left: 0%;
      position: absolute;
      background: var(--link);
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
      width: 0;
    }
    .content p a:hover:after { 
      width: 100%; 
      left: 0; 
    }
    

  • @phenomlab

    And here is mine with mirror effect on the text (for default theme) 😉

    .posts .content a {
      background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #337ab7 50%);
      background-size: 200% 100%;
      background-position: -100%;
      display: inline-block;
      padding: 5px 0;
      position: relative;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: all 0.3s ease-in-out;
    }
    
    .posts .content a:before {
      content: '';
      background: #54b3d6;
      display: block;
      position: absolute;
      bottom: 1px;
      left: 0;
      width: 0;
      height: 1px;
      transition: all 0.3s ease-in-out;
    } 
    
    .posts .content a:hover {
     background-position: 0;
    }
    
    .posts .content a:hover::before{
      width: 100%;
    }
    
  • Topic has been marked as solved  DownPW DownPW 

  • With my code the only problem is I have the same effect on images (on mouse hover) that contain a url.

    Do you have a solution to fix this @phenomlab ?


  • @DownPW I had exactly the same issue. Before I provide my solution, from recollection, you are using Fancybox ?



  • @DownPW in that case, you’ll need to add the below jQuery function just after the one you should already have

        $(window).on('action:posts.loaded', function(data) {
            console.log("Polling DOM for lazyLoaded images to apply Fancybox");
            $(document).ready(function() {
                $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                    $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                });
            });
        });
    

    What we are doing here is polling the DOM looking for any new images as posts are being loaded (hence the hook action:posts.loaded, and then it we get a match, we add new class .noanimate. You’ll need to modify your existing class block you are using for the hover effect so that it is not being executed against any HTML that contains this class - see below for an example (in your use case)

    .posts .content a:not(.noanimate) {
      background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #337ab7 50%);
      background-size: 200% 100%;
      background-position: -100%;
      display: inline-block;
      padding: 5px 0;
      position: relative;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: all 0.3s ease-in-out;
    }
    

  • @phenomlab

    Thanks dude I will test that


  • @phenomlab said in hover link effect:

    .posts .content a:not(.noanimate) {
    background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #337ab7 50%);
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    padding: 5px 0;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
    }

    it’s worked, thank you.


If this topic and the associated threads resolved an issue for you, or was useful, why not buy me a coffee? It's a nice gesture, and there's other ways to donate if you wish 💗

Discover More