Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

I want to add a custom underline (PNG image) that appears upon hovering over text


liampetro

Question

Site URL: https://fiddle-reed-4bh7.squarespace.com/config/design/custom-css

More specifically, I'd like like it so that when I hover over a given option on the home page, a png appears beneath the text to underline it. As shown, I've photocopied rough, pen drawings/lines as a stylistic choice. It'd be cool to carryout this style in a number of ways throughout the site. So the PNGs would be of simple lines drawn in pen, but I'd want these lines to appear under each option upon a mouse hovering over that specific option. Take a look at the mockup below. Anybody have any ideas?

 

p.s. let me know if you need help accessing the website.

 

example.jpg.549d77b78448c75091b874f87852b097.jpg

Link to comment

3 answers to this question

Recommended Posts

  • 1

yes, that's fine. you upload all your images, set one rule that defines the background position for all your underlines and then set a rule for each one to set the background image. you do this with the nth-child selector.

e.g.

<style>
a:hover {
  background-repeat: no-repeat;
  background-size: auto;
  background-position:-15px 120%;
}
a {
  padding:20px;
}
a:nth-child(1):hover {
    background-image:url('https://image-one-url-goes-here');
}
a:nth-child(2):hover {
    background-image:url('https://image-two-url-goes-here');
}
</style>

this applies background images to links based on their order within their parent element. so you'd probably have to find the block id or parent class for the links you want to treat in this way and prefix all the rules with that id.

best way to do it is to publish your site with a password and post the url and password here so someone can help you place the images. (upload your images first

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 0

the issue you will have is that underlines are of variable length: "bippy" is a lot shorter than "and yet another" (which I know is a placeholder but you will still have variable lengths). 

However, it's a fun question, so let's have a go at answering it:

there are two approaches to this. use a background image and if you really want to get the lengths correct then stretch it. will probably look worse the wider it gets so you could also consider centring it.

you could put something like this into a code block on the page. you'll have to upload your image and replace the url, and you'll have to be more specific with your selector as this will target every link, but hopefully you get the idea. the background image will get clipped eventually so you might need to add extra padding around your links (second rule in the code block, but it's optional)

<style>
a:hover {
  background-image:url('https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1628968674461-KNFVNIA4PUHS80FLEOKE/Screenshot+2021-08-14+201631.png?format=2500w');
  background-repeat: no-repeat;
  background-size: auto;
  background-position:-15px 120%;
  }
  a {
    padding:20px;
  }
</style>

here's the example i made

underline.gif.f51c0fd111c1d09dadc8b3a40cb7dba2.gif

I said there were two approaches. The second approach is to use a border-image which enables you to split your image up into a start, a repeated middle and an end. it's a lot harder to put together but would give you that variable length. As it's a lot harder I won't do the example here, but you could look up border-image css and see how it's done. you'd need to be a lot more careful about how you constructed your image, so if you can make the first approach work that would probably be advisable.

 

 

Edited by iamdavehart
added gif example

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 0

@iamdavehart Thanks so much for your help!

So just to make sure things look finished and appealing, my plan (if possible) was to use PNGs of a number of different line lengths that match the length of the text. That way I wouldn't have to stretch one image and compromise aesthetics. Below is a sample of various line lengths that I would cut, export as PNG files of a standardized height, and then include into Squarespace.

Now I'm imagining that makes things much more complicated or impossible. The reason why I can only imagine this is because I'm a coding novice, and even that is a generous title. If there's anything else you can give me or some solutions to this issue that would be awesome!

underlines (general).png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...