Jump to content

trianglespace

Member
  • Posts

    9
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

trianglespace's Achievements

Level 2

Level 2 (2/20)

0

Reputation

  1. Thank you, this worked flawlessly! Coffee sent šŸµ
  2. 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; }
  3. @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 :)
  4. 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 šŸ™‚
  5. This solution has worked flawlessly, thanks for your help! I can work from here :)
  6. 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.
  7. 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
Ɨ
Ɨ
  • Create New...

Squarespace Webinars

Free online sessions where youā€™ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.