hover link effect

[DownPW]

Hello @phenomlab

I see this effect on link here.

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]

@DownPW

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

I will test

[phenomlab]

@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.

[DownPW]

@phenomlab

.posts .content seems to be pretty good for me

[cagatay]

@DownPW said in hover link effect:

@phenomlab

.posts .content seems to be pretty good for me

it not worked on my web site.

[phenomlab]

@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; 
}

[DownPW]

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

[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 ?

[phenomlab]

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

[DownPW]

@phenomlab yep

[phenomlab]

@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;
}

[DownPW]

@phenomlab

Thanks dude I will test that

[cagatay]

@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.

[DownPW]

Hello

I play with URL/Link CSS Trick for topic on nodebb V3

Here are 3 effects I love that I share with you I love the first one and I think it’s the one I’d keep in production.

– Style 1 :

.posts .content a {
    box-shadow: inset 0 0 0 0 var(--bs-link-color);
    color: var(--bs-link-color);
    padding: 0 .25rem;
    margin: 0 -.25rem;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
    border-radius: 0.5rem;
}

.posts .content a:hover {
    color: #fff;
    box-shadow: inset 200px 0 0 0 var(--bs-link-color);
    border-radius: 0.5rem;
}

.posts .content a:hover::before{
    width: 100%;
} 

– Style 2 :

 .posts .content a {
    color: var(--bs-link-color);
    background-image: linear-gradient(to right, var(--bs-link-color), var(--bs-link-color) 50%, var(--bs-link-hover-color) 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:hover {
 background-position: 0;
}

.posts .content a:hover::before{
    width: 100%;
}

– Style 3 :

.posts .content a {
    color: var(--bs-link-color);
    text-decoration: none;
    background: linear-gradient(to right, var(--bs-link-color), var(--bs-link-color)), linear-gradient(to right, var(--bs-link-hover-color), var(--bs-link-hover-color), var(--bs-link-hover-color));
    background-size: 100% 3px, 0 3px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
    padding-bottom: 3px;
}

.posts .content a:hover {
 background-size: 0 3px, 100% 3px;
}

.posts .content a:hover::before{
    width: 100%;
}

–> It’s up to you to play with colors, adapt the code to your environment etc.

Have fun

[phenomlab]

@DownPW these look great! Thanks for sharing.

[cagatay]

@DownPW good job

[DownPW]

Hello !!!

I search to have this hover link effect on nodebb without success.
If anyone has an idea, I’m a taker.

go to the download button

https://www.warp.dev

[phenomlab]

@DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function

  document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => {
    const style = getComputedStyle(button);

    const lines = document.createElement("div");

    lines.classList.add("lines");

    const groupTop = document.createElement("div");
    const groupBottom = document.createElement("div");

    const svg = createSVG(
      button.offsetWidth,
      button.offsetHeight,
      parseInt(style.borderRadius, 10)
    );

    groupTop.appendChild(svg);
    groupTop.appendChild(svg.cloneNode(true));
    groupTop.appendChild(svg.cloneNode(true));
    groupTop.appendChild(svg.cloneNode(true));

    groupBottom.appendChild(svg.cloneNode(true));
    groupBottom.appendChild(svg.cloneNode(true));
    groupBottom.appendChild(svg.cloneNode(true));
    groupBottom.appendChild(svg.cloneNode(true));

    lines.appendChild(groupTop);
    lines.appendChild(groupBottom);

    button.appendChild(lines);

    button.addEventListener("pointerenter", () => {
      button.classList.add("start");
    });

    svg.addEventListener("animationend", () => {
      button.classList.remove("start");
    });
  });
})

The CSS for start is below

.button-gradient.start .lines svg, .button-transparent.start .lines svg {
  animation: stroke 0.3s linear;
}

And this is the corresponding keyframe

@keyframes stroke {
  30%, 55% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 5;
    opacity: 0;
  }
}

It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.