trianglespace

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 🍵

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

@Web_Solutions Would it be possible to implement this same functionality when hovering over images? For example, on this page, when you hover over an image, it will underline the corresponding name, but it isn't animated. Can this be animated too? An example of the code for how this works:

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

Thanks :)

@Web_Solutions Thank you! This worked :)

Hi, I currently have an animation in my navigation bar that shows the underline as an animation when hovering over an option. I am using 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;
}
}

How can I implelement this same feature but have it work for all hyperlinks on all pages?

Thanks 🙂

On 10/27/2023 at 1:22 PM, tuanphan said:

Add this to Website Tools (under Not Linked) > Custom CSS
 

/* Hover image show text underline */
.fe-block-acce60c4e149796dadbc:hover ~ .fe-block-84f28a953fc05a1b2476 h4 a {
    border-bottom: 2px solid;
}

 

This solution has worked flawlessly, thanks for your help! I can work from here :)

On 10/21/2023 at 11:29 PM, tuanphan said:

Can you share link to page? We can check/help easier

Here is a link the page (password: newfyber). You can see that when hovering over 'Hamptons', the hyperlink below does not display the underline. But if you hover over the hyperlink text, it shows the underline. I'm trying to get it to show the underline when you are hovering over the corresponding image too, I hope that makes sense.

Is there a way to do this?

Hi there,

I have created a hyperlink that only displays the hyperlink underline if your mouse cursor is hovering over the text, as can be seen in the image attached (cursor is there although you can't see it, the screenshot didn't include the cursor). I am trying to create the same effect when you hover over the image above the hyperlink, but I am not sure how I can achieve this.

Thanks