I have to hover effect for a menu. Please see the image for reference. All menu items are of different size. The hover has shades it it. More black on left, less black on right while center is repeatable. So now my question is can we have a hover with 3 different images together so that I dont need to have separate for hover state for each menu item.
Thanks in advance.
Related
I would like to place a background image i made behind my nav bar that is responsive to the viewport (gets smaller when the window gets smaller). The image looks like this:
Nav Bar Background Image
I would like the black band to be behind the nav bar and for the arm to then go into the next section. I would like the text of the next p to not over lap the arm and to align around it.
Is it possible to do this using CSS? Using HTML5.
Many thanks
Since the black bar behind the navigation is just a rectangle, you can use CSS to set a background-color of #000 on a div for your navigation bar, have it be 100% width, and set a height on it. Then, simply put your navigation text/buttons inside of that div.
From there, you can have just the arm be a background image for the next element in your HTML, and use background-position: top right to align it to the right side of the page and top so that it touches the black navigation bar.
Hope that helps! Let me know if you need more help and I can do something in a codepen real quick :D
I'm creating a website, where I put a menubar on top of a background image.
The menubar is build as <nav><div><ul><li>[<ul>]</li></div></nav>.
The div element owns a background. li-tags own a background depending on selection and hover.
When hovering over a menu item, I actually want it to be transparent, so that you can see the background image through the parent-tags. However the div needs a background for having a bar.
Is there a possibility to build a kind of tunnel through the parents to a specific z-index or to set only the corresponding background of the parent transparent? Something like backgroundZ: -5
If I make a div that has 50x50px dimension, and I make an image (sprite) that has 50x100px dimension. Then one image is on top of the other.
Now, if I make a hover effect on the div, where the image should change, I would just change the background position from top to bottom as an example. Then when I hover the image changes and so on. Easy...
But, if I use a transition timer, then I will see the image move from the top, to the bottom.
My question is: Is it possible via sprites to make fades instead ? I mean, lets say I have an image that changes color. Then I don't want it to like like the image is going up and down, but just fade in the color of the other image and so on.
Is that possible via sprites, or do I really have to just onclick-change-image events etc. ?
Thanks in advance.
For clarification: I'm not asking how to darken an image when you hover over it. I'm wondering how to make other images surrounding the image your cursor is over darken.
Here is an example: http://www.b-reel.com/
When you hover over the big category images, the surrounding images darken, but the hovered image remains the same.
Any input would be appreciated. Thank you!
You don't make surrounding images darker. Instead, what you do is you put a div around all images, and when the cursor is over this div, all images are darker. But you also add div elements around each image, and you make an image less dark when the cursor is over it. The combination of both is what gives you the desired effect.
In the example you posted they are using JavaScript to apply a .fadeOut class on the other divs. That .fadeOut class sets the opactiy of the other divs to 50%.
I would like a border around my drop down menu on hover. I want the right and left borders on the top menu to align with the border on the drop down. And I don't want to see the border underneath the text on the top menu. I'm not sure that I'm explaining things clearly so I'm including a picture of what I want.
Here is my attempt
That's a cool style. To implement it, the CSS will need to do the following:
The tabs (#nav ul li a) will need a white background and a black border on the top, left, and right.
The dropdown will need a white background and a black border on all sides.
The trick is to use z-index to place the tab above the dropdown, and to make the tab slightly taller on hover. The bottom of the tab should extend below the bottom of the tab row, in order to cover up part of the dropdown's top border. Does that make sense?
If you'd like help with writing the CSS, I recommend adding code to your question.
Hope this helps!