menu images and opacity effect

  • 1) I’m trying to get the images to display instead of the text or at least have the text links below the image itself. Unforunately, I can’t seem to get more than 1/4 of the image showing. What to do to get the whole thing to show? I have added a height and width, but it’s not working out. I know I’ve forgotten something, I just don’t know what it is.

    2) I’m trying to get the opacity effect working as here:
    https://www.mandarindesign.com/troops.html#opacityrollover

    I’ve added the inline css, and add the class to the first link. But again this isn’t working even with 1/4 image.

    Cheers in advance

    EDIT: It’s turning into a real mess hope someone can guide me! I’ve removed the inline and added it to the style.css I think the values I’m using are incorrect

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter jinsan

    (@jinsan)

    Ok I’ve done some weird stuff to it, and it doesn’t work although I managed to change the colour to a darker blue using the code. It’s confusing the hell out of me.

    I ended up adding the code to each single id and using background for each image, was this the correct way, or shuld I be using img src instead within the header.php?

    https://sekhu.net/wp

    I don’t know if this helps, but if you have an image in the background, it will only display based upon the size of the area. If you have a background on the text, say in the H1, instead of having it set to transparent, it will also cover up the background. Think about the parent/child relationship of CSS.

    I did a lot of work with opacity issues in my CSS Experiments and they were much harder than I thought they would be. Plus, since different browsers use different opacity rules, you have to list the rules for each browser, which is a pain.

    Yes, your page is a mess. I don’t know where to start. But I think you are trying to use opacity to create hovers over your menu-nav bar? Just create hovers and not use opacity.

    Why don’t you search for exact examples of what you are trying to do and then copy that. You can find a ton of great working examples all over the web. Look at https://css.maxdesign.com.au/listamatic/ and I have more on roll over links on this article.

    Thread Starter jinsan

    (@jinsan)

    I think you are trying to use opacity to create hovers over your menu-nav bar? Just create hovers and not use opacity.

    I have done that, except without images – at the same time, just because I can’t do it, I don’t see it as a reason not to do something that is possible. If I settled for just having things up to the knowledge I had before, I wouldn’t have learnt anything.

    The opacity technique I am using, or trying to implement works on Mozilla based browsers and IE, Opera I’m not bothred about as none of my friends use it. So it’s one set of rules and one that works in the two most popular browsers – that’s the main goal, if it works in others that is a bonus.

    I have looked at CSS Maxdesign, however, their version of the image swap technique doesn’t display correctly in all browsers, something I want to avoid at least in two. The main hover I picked up and modified from Listamatic, so yes I have looked over extensively.

    Mandarin have it working, but they use inline styles, again something I am trying to avoid – this isn’t as difficult as it seems, it’s just having the know how to:

    1) get the images to display correctly
    2) apply the opacity correctly

    Although I haven’t got it right just yet, I know others that have with the right knowledge, I’m hoping someone with that knowledge will be able to help. If quit now, I may as well stop learning, but then what’s the point in anyone asking how x is done?

    The menu itself is fine, it’s valid and it works – it’s the two points I made above that are causing the issues, and that will make it work. I have an understanding of backgrounds and they will apply within the menu, which is why they are set to transparent.

    Hopefully someone else can provide some good guidance and an idea of where I’m going wrong, I have some inkling. In that the I am playing with the list rather than the link where my focus ought to be. But that’s an inkling.

    Thread Starter jinsan

    (@jinsan)

    Ok, part 1 is done to some extent – I know in IE there is still the small bars on top of each image, all in due course. The images exist and they work as links, they hover in FF but not in IE, a normal conclusion with regards to IE.

    If know of a css menu that allows a user to swap images, and it works in all browsers (except safari), and I have though about using the image swap method but I think I would rather go for opacity in this instance.

    Any tips on what to do first and so on before I get started, or just dig in?

    EDIT: Some success. Ok in IE it works great, FF is now the problem. I’ve got a black bar across the images, and I guess I need to remove the existing hover that’s being used. Let me know if there’s something I need to be doing

    EDIT2: All done – works in IE and FF. Follow your dreams. Beefcake, beefcake, beefcake ??

    Jinsan- inspired by you I have got my head graphic fixed up using opacity. In the fine print of the fine tutorial you provided it demos that if you set the bg to black you get a much nicer image in the off state. Just my 2c.

    Thread Starter jinsan

    (@jinsan)

    nice one, I’ll def try that. Cheers for the tip root and glad you sorted yours too. aphrodite is coming along very nicely:)

    I think the next step for me is to try to set the image as current with it’s highlighted effect. Do you have an idea on how to achieve this part? I guess ifelse statements obviously come into play….hmm maybe I can figure it out actually I’ll give it a go later

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘menu images and opacity effect’ is closed to new replies.

Tags