Left to Right Hyperlink Animation (When Hovering Over Image)

Thanks to the help of @Web_Solutions, I was able to create a hyperlink underline animation that goes from left to right when hovering over the link. I used this code below:

/* Navigation Hyperlink Animation */
.header-nav-item {
a {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
}
a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
}

This works seamlessly, however, I am looking to implement this same functionality into another part of my website where you hover over an image and it will underline the corresponding name. This can be seen here. You will notice that when hovering over the name, the animation works. However, when hovering over the corresponding image, it doesn't do the animation, it simply shows/hides the underline. I am wanting it to animate the underline when hovering over the image too. I currently use this code to have hyperlinks underlined when hovering over a corresponding image (this is one example of many due to the number of images):

.fe-block-17923ee30e4b127c491c:hover ~ .fe-block-81fb5c488a4c1e3f8586 h4 a {
    border-bottom: 1px solid;
}

6 hours ago, trianglespace said:

Thanks to the help of @Web_Solutions, I was able to create a hyperlink underline animation that goes from left to right when hovering over the link. I used this code below:

/* Navigation Hyperlink Animation */
.header-nav-item {
a {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
}
a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
}

This works seamlessly, however, I am looking to implement this same functionality into another part of my website where you hover over an image and it will underline the corresponding name. This can be seen here. You will notice that when hovering over the name, the animation works. However, when hovering over the corresponding image, it doesn't do the animation, it simply shows/hides the underline. I am wanting it to animate the underline when hovering over the image too. I currently use this code to have hyperlinks underlined when hovering over a corresponding image (this is one example of many due to the number of images):

.fe-block-17923ee30e4b127c491c:hover ~ .fe-block-81fb5c488a4c1e3f8586 h4 a {
    border-bottom: 1px solid;
}

 

I can see you have added these code a lot of time for many items. Please remove all of these type of code(See attached image). And then add the code below.

.fe-block-acce60c4e149796dadbc:hover~.fe-block-84f28a953fc05a1b2476 h4 a:after, .fe-block-947f6e1c3acc3d28efaa:hover~.fe-block-3b82927b237501107f84 h4 a:after, .fe-block-a77b80ddafc4ba0654ad:hover~.fe-block-ed14af7507c49bf6cd99 h4 a:after, .fe-block-dff3263005c32cc3321d:hover~.fe-block-174c51edf65536201d0b h4 a:after, .fe-block-ad9d869f65d5f00eda00:hover~.fe-block-d33bf5cabd7054d87ccc h4 a:after, .fe-block-b1c636cbf2bfc6b41353:hover~.fe-block-ea969695eb38135e80c7 h4 a:after, .fe-block-a9d8c93104b3c5e0342c:hover~.fe-block-b9d3927d8795c2d1fe07 h4 a:after, .fe-block-0ae7e40eca6294f3d46c:hover~.fe-block-5d66a0eb89ef241393d6 h4 a:after, .fe-block-3eb7b772eb85ffa61284:hover~.fe-block-f4e5f7182bcff90c5002 h4 a:after, .fe-block-a8fb8b7416b4587c8034:hover~.fe-block-26269d723eb3377854a8 h4 a:after, .fe-block-58c5f35b183a60d941e8:hover~.fe-block-c7ffb07f2610ef3cc91c h4 a:after, .fe-block-833b9a9b65e7241e61f9:hover~.fe-block-da8e24d0317030e5ae4d h4 a:after, .fe-block-da8f2a7d5236ca568333:hover~.fe-block-c237b819cf79ada9073e h4 a:after, .fe-block-12aa26f2d62264c2c057:hover~.fe-block-34889a051f9f978539b6 h4 a:after, .fe-block-85898ca5161ffca17cff:hover~.fe-block-c2fa1e0f3e66dc921b63 h4 a:after, .fe-block-64e9691645c4d2c5cd50:hover~.fe-block-2e405997721b5e41ab0f h4 a:after, .fe-block-c64ea2d5873ed9fc89df:hover~.fe-block-8f0f807b7cbd6c7d46ae h4 a:after, .fe-block-c6b3f601c9f850fd6836:hover~.fe-block-fcd5fa02f172145cfbec h4 a:after, .fe-block-11c14981bacbe0a2b18f:hover~.fe-block-f504828cf0ac25b75078 h4 a:after, .fe-block-f3f21639331136d462c4:hover~.fe-block-f06427f054e1d4359ec4 h4 a:after, .fe-block-ba3d026fb4879efcbe76:hover~.fe-block-b32e290d481dcbddca9d h4 a:after, .fe-block-f44d981382efd6072f1a:hover~.fe-block-a5e988b8de248f719a96 h4 a:after, .fe-block-e3186ff6aa3185ee27c7:hover~.fe-block-d7ae22fb61781e0a0eaf h4 a:after, .fe-block-9aad7c40c57746863be0:hover~.fe-block-3fc5729de9e47a49b9cb h4 a:after, .fe-block-59904fec7bbfbb4eae0c:hover~.fe-block-145a7676e290b56d41d4 h4 a:after, .fe-block-2b3fcde6f82191124a4e:hover~.fe-block-b120fd1fb45a88c25632 h4 a:after, .fe-block-212efedf721381bbc436:hover~.fe-block-352ec6ff3564a03de123 h4 a:after, .fe-block-dbe533c2dc4ce640643d:hover~.fe-block-a27a4e5ab1303c890767 h4 a:after, .fe-block-1a453bad7029e2738ea8:hover~.fe-block-f88628d74660ed821f99 h4 a:after, .fe-block-17923ee30e4b127c491c:hover~.fe-block-81fb5c488a4c1e3f8586 h4 a:after {
    width: 100% !important;
}

On 11/9/2023 at 11:24 PM, Web_Solutions said:

I can see you have added these code a lot of time for many items. Please remove all of these type of code(See attached image). And then add the code below.

.fe-block-acce60c4e149796dadbc:hover~.fe-block-84f28a953fc05a1b2476 h4 a:after, .fe-block-947f6e1c3acc3d28efaa:hover~.fe-block-3b82927b237501107f84 h4 a:after, .fe-block-a77b80ddafc4ba0654ad:hover~.fe-block-ed14af7507c49bf6cd99 h4 a:after, .fe-block-dff3263005c32cc3321d:hover~.fe-block-174c51edf65536201d0b h4 a:after, .fe-block-ad9d869f65d5f00eda00:hover~.fe-block-d33bf5cabd7054d87ccc h4 a:after, .fe-block-b1c636cbf2bfc6b41353:hover~.fe-block-ea969695eb38135e80c7 h4 a:after, .fe-block-a9d8c93104b3c5e0342c:hover~.fe-block-b9d3927d8795c2d1fe07 h4 a:after, .fe-block-0ae7e40eca6294f3d46c:hover~.fe-block-5d66a0eb89ef241393d6 h4 a:after, .fe-block-3eb7b772eb85ffa61284:hover~.fe-block-f4e5f7182bcff90c5002 h4 a:after, .fe-block-a8fb8b7416b4587c8034:hover~.fe-block-26269d723eb3377854a8 h4 a:after, .fe-block-58c5f35b183a60d941e8:hover~.fe-block-c7ffb07f2610ef3cc91c h4 a:after, .fe-block-833b9a9b65e7241e61f9:hover~.fe-block-da8e24d0317030e5ae4d h4 a:after, .fe-block-da8f2a7d5236ca568333:hover~.fe-block-c237b819cf79ada9073e h4 a:after, .fe-block-12aa26f2d62264c2c057:hover~.fe-block-34889a051f9f978539b6 h4 a:after, .fe-block-85898ca5161ffca17cff:hover~.fe-block-c2fa1e0f3e66dc921b63 h4 a:after, .fe-block-64e9691645c4d2c5cd50:hover~.fe-block-2e405997721b5e41ab0f h4 a:after, .fe-block-c64ea2d5873ed9fc89df:hover~.fe-block-8f0f807b7cbd6c7d46ae h4 a:after, .fe-block-c6b3f601c9f850fd6836:hover~.fe-block-fcd5fa02f172145cfbec h4 a:after, .fe-block-11c14981bacbe0a2b18f:hover~.fe-block-f504828cf0ac25b75078 h4 a:after, .fe-block-f3f21639331136d462c4:hover~.fe-block-f06427f054e1d4359ec4 h4 a:after, .fe-block-ba3d026fb4879efcbe76:hover~.fe-block-b32e290d481dcbddca9d h4 a:after, .fe-block-f44d981382efd6072f1a:hover~.fe-block-a5e988b8de248f719a96 h4 a:after, .fe-block-e3186ff6aa3185ee27c7:hover~.fe-block-d7ae22fb61781e0a0eaf h4 a:after, .fe-block-9aad7c40c57746863be0:hover~.fe-block-3fc5729de9e47a49b9cb h4 a:after, .fe-block-59904fec7bbfbb4eae0c:hover~.fe-block-145a7676e290b56d41d4 h4 a:after, .fe-block-2b3fcde6f82191124a4e:hover~.fe-block-b120fd1fb45a88c25632 h4 a:after, .fe-block-212efedf721381bbc436:hover~.fe-block-352ec6ff3564a03de123 h4 a:after, .fe-block-dbe533c2dc4ce640643d:hover~.fe-block-a27a4e5ab1303c890767 h4 a:after, .fe-block-1a453bad7029e2738ea8:hover~.fe-block-f88628d74660ed821f99 h4 a:after, .fe-block-17923ee30e4b127c491c:hover~.fe-block-81fb5c488a4c1e3f8586 h4 a:after {
    width: 100% !important;
}

 

Thank you, this worked flawlessly! Coffee sent 🍵

Just now, trianglespace said:

Thank you, this worked flawlessly! Coffee sent 🍵

Thanks