I think this will be easier to show you than explain, but basically I am trying to create a transition effect on two separate div tags when the user hovers over one of them. Here's an example I just whipped up. It's not perfect, I'm just trying to figure out how to split the robot in half.
http://color-reel.com/growbot.html
currently, the right half will move when you hover over it, but I want both left halves and the right have to open up so it looks like the robot is coming apart.
thanks in advance for your help!
edit: p.s. something small that annoys me that I don't know if it's "fixable" is if div element slides past the user's mouse when the element is being hovered over, it glitches. is there an easy way to fix this?
Maybe if you nest the divs you might be able to target the parent div.
So you get something like this:
#parent:hover #three,
#parent:hover #four {
....
}
Related
I'm using the following radial menu...
http://www.cssscript.com/demo/radial-popup-menu-with-javascript-and-css3-circlemenu/#
Looks great, however I want two on my page. One bottom right and one bottom left.
That's no biggy, however obviously when on the left of the screen i need the buttons to pop out to the right and visa versa.
my question...
for each of the list items there's a transform in the CSS like...
transform: translate(-144px, 0);
obviously having it as a positive 144 will make it move to the right, which is great when the menu is positioned in the bottom left...
Rather than having to have a left class and right class with essentially the same CSS behind it, just one being positive and the other negative, is there a nice way to have 1 set of css rules that will just translate the li away from the div/screen edge?? or maybe I am thinking about this completely wrong (feel free to say if i am being a numpty)?
thanks
marking as resolved, as per #hissvards comment
"I don't think there's a way to do it using pure CSS, but it would be
dead easy with a preprocessor. - Hissvard"
I started on doing this, and I thought; oh this will be easy, but I got stuck when the fly-out covers up the other categories.
I don't even know if I can do this! My CSS skills are quite rusty!
Here's what I started, but it's really not even good:
+ http://codepen.io/anon/pen/ZbYzwr
[===========]
[===========][===========]
[===========][===========]
[===========][===========]
[-----------][===========]
[===========]
[:::::::::::::::::::::::::::::::::::::::::::]
If this is the menu, then because the lower categories when they are flown-out invisibly cover up the ones above them, you can't hover over them!
It's supposed to be like the LXDE panel menu (lxpanel).
On LXDE, the fly-out items start from the top, unless they would go below the screen, in which they are appropriately offset. I can't think of a way to do that with CSS. Can you? The only way I can think of is to let the fly-out items start from the bottom, but what's the special trick to get that to work?
Thanks!
Set margin-left: 100px; to [category] > ul instead of button.
I've forked your pen here.
I am trying to make an image map that pops-up different pictures at different places on the map. I want to be able to make a second "pop-up" after the first one on my images, but I have tried various changes to my code and it has yet to be effective. Is what I am trying to do possible in CSS? I feel like it should be, but because I am not aware of any examples of it, I feel uncertain.
I realize that part of the problem is that the "inner" span which indicates my "hello" box is not distinguished from the "span" that goes with the box with the picture. I am not sure how to make these distinct. The Second dot turns from blue to yellow only when it is being hovered over, so I don't know why the "hello!" box does not behave the same way.
Here is my code: http://jsbin.com/AmAqito/3/edit?html,css,output
*Notice the blue dot in the middle.
Thanks!
Try changing your #map li a:hover span selector to #map li a:hover > span. This will target only the span on the level immediately after the anchor tag.
The demo http://jsbin.com/ibAtiNu/1/edit
I need help creating something like this link (http://www.standardchartered.co.in/borrow/)
When the user hovers over the navigation, the grey triangle image will appear. I'm not very sure how to go about doing it. Please help!
The best way to do this is to use a plug-in, possibly for jQuery. There are many drop down menu plugins available. A google search for "jquery drop down menu" will help you. One of the first results for me is:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
The second one down on that page appears to have the effect you want, but it also depends on how you want the rest of the menu to appear. You will need to do some research and choose one that suits you.
OR, if you just want a grey triangle to appear, without the menu, when you hover over an element, then some css like this is what you want:
li:hover {
background:url('./images/grey_triangle.png') center bottom;
}
Which says, when the li element is hovered, use ./images/grey_triangle.png as the background image and place it in the center at the bottom of the element. You would need to create your own grey triangle, set appropriate padding etc, but that is the basic css you need for the effect.
I'm going for a pretty minimalistic look on my site and I was wondering how I could achieve a look like this:
http://iq.gs/cssdropdown
The top left hand corner in the picture would be transparent or a solid color to match the top navigation bar. What I'm looking to do is to show the six different colored boxes as block elements so when someone hovers over the navigation part, the six boxes drop down and can be used as links. I'm not sure how to do this, as I'm a newbie to CSS.
Please help!
Something like this? : http://jsfiddle.net/SpJ5f/
I didn't bother using the colours/fonts etc you asked for, just the idea behind it