Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adding static graphic as well as hover graphic

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #166017
    Birdi999
    Participant

    I am looking for an easy way to put in a 3 button link as a menu nav bar. I have figured out how to put a graphic as a background and a border in CSS, but I can’t figure out how to put a static graphic in. Then I’d like to add an additional mostly transparent graphic to sit on top of it as you hover. I think if someone could just tell me the code to add for a graphic, I’d be good to go. Of course, more help is good, too :O)

    My idea is kinda layed out at http://www.amberlee.me/prose.html
    The top chalkboard would be the static one, whereas the bottom one would be the hover effect.

    Thanks in advance for any help.

    #166026
    Atelierbram
    Participant

    If I understand your intention correctly, what you want to do is make these two images into one image-sprite.
    Here’s a demo, you can ignore the tooltips.

    #166055
    Birdi999
    Participant

    Hi,

    Thanks for your input. I am figuring it out, but SLOWLY. Going into day two.

    I figured out how to hover one image over another one, but I am having issues with positioning.

    This is my most pressing issue:
    I am trying to put a non-standard font on top of a graphic. I was wondering if I could upload the font to my host provider and access it from there. Any ideas?

    Here’ the demo where I got the concept from:
    http://www.webdesignerwall.com/demo/advanced-css-menu/?TB_iframe=true&height=270&width=810

    And here’s the accompanying website:
    http://webdesignerwall.com/tutorials/advanced-css-menu

    It is very interesting. Check it out if you have time.

    Amber

    #166095
    Atelierbram
    Participant

    I am trying to put a non-standard font on top of a graphic. I was wondering if I could upload the font to my host provider and access it from there. Any ideas?

    If you are telling that you don’t want your font ’embedded’ in the image, but as HTML-text (‘on top of that image’), then you can use @font-face , it’s been done all the time. There’s lot of information about this on the web.

    Do you use FTP to upload your files to your remote server?

    If yes, then make a folder in your ‘assets’ folder, give it a name like ‘fonts’ or ‘type’, put your fonts in it, and upload the folder with FTP. Make sure of the right paths to the files in the CSS.

    I figured out how to hover one image over another one, but I am having issues with positioning.

    You can help me help you by making a codepen.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.