Here is what I'm trying to do :
Have 2 divs one under the other. The bottom one is displaying an image and the up one is let's say white.
On hover, I want the white one to hide so that we can see the one under, with like its opacity down to 0 so it's transparent.
The things is, it should only show a part of that div with a transparent gradient circle around it, following the mouse's course.
Don't mind the white rectangle, it's about the background : the UP div would be a white fullscreen div, whereas the bottom one would be the sky, and when hovering with the mouse we would only see a part of the sky.
Do you guys have any idea on how I could do that, using HTML, css and/or JQuery? :/
one solution would be using a white PNG with a transparent gradient hole in it as the background of the upper div
then with onHover="script..." you set the position of the upper div
both divs must have absolute positioning so one gets on the top of the other
Related
I'm trying to overlay part of a page with a triangle. I have an absolutely positioned div that I put some text in. I can display / hide it in response to buttons being clicked. However, when I replace the text with a canvas nested in the div, I'm having trouble with the display. I would like for the canvas background to be transparent but have the triangle be visible, covering part of the page it's overlaying. My stylesheet has visibility none. I've tried a bunch of combinations of opacity, visibility, etc., but so far with no success. I usually end up with the background (unfilled part) and the triangle showing with the same opacity. Any ideas? Is there a whole better approach?
Well, I answered my own poorly worded question while I was lying wide awake last night. I made the div with the canvas element transparent and that was all it took.
Say you have a box with a background, that starts with white and ends in black. Alright, now say there's a smaller box inside that box. Now, there's an even smaller box inside that smaller box. Again, a smaller box inside the previous box.
In this situation, the boxes are Divs. I want the background of the smallest div to reflect the background of the largest div. Since the background of the largest div is a gradient, I can't just slap the same gradient on the background of the smallest div. I've got to somehow make the 2 parent divs transparent in the areas that the smallest div covers. Any way to achieve this?
P.S. Sorry if the question is a bit confusing. Writing it a bit hurriedly.
You can apply background:transparent; to the smaller box in style attribute.
I am trying to do something similar to expose from jQuery toolkit.
http://flowplayer.org/tools/demos/toolbox/expose/index.html
Except I am trying to use an image as a background and have the overlay over it and reveal only a portion of the image as 100% visible (kind of like a reverse highlight).
My current solution is:
I make an overlay on a image background div and make the z-index of the visible section div higher than that of the overlay. But since the background of the visible section div is transparent the div just shows the overlay. The way the plugins I have seen get around this is by setting the background of the visible section div to a color allowing that whole div to set above the overlay since I am using a pretty big image, I don't have the option to use a colored background on the div. I also don't want to show a cloned copy of the original image because these background images are huge.
I couldn't find any documentation of how to do this online. I'd appreciate any feedback I could get.
My suggestion would be to absolutize the element, set it to a relatively high z-index, then sit your faded layer below that, but still higher than any other content. It would give the appearance of the effect you want.
Here is an example I've put together to better illustrate this problem:
http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html
When you go from image A area to image B area or reverse, there are locations where the rollover doesn't show because the image map below is covered with transparent area of rollover image. Is there a way to make the rollover image hidden from mouse? In ActionScript I could do this by setting an object's mouseEnable property to false to get it out of the way, but I don't know how I can do this in HTML/JavaScript.
The rollover image (pink) is absolute positioned with a higher z-index above the black & white image. The practical usage is for highlighting floorplans on a floorplate of a building whenever mouse rolls over a floorplan.
Thanks,
Saeid
I don't know if this would work for your situation, but an easy way to do it could be to make your black & white image partially transparent (instead of white) and put the pink image below it (that is, give it a lower z-index). Does that help at all?
Using absolute positioning, I have placed a div with opacity of 0.5 in front of an image by giving it a higher z-index. Also using absolute positioning, I want to put another smaller div in front of the first div using a higher z-index. This smaller div would show only part of the image (like a window), but have no opacity. Eventually, I will make the smaller image draggable.
What I am struggling with is that as long as the main div has the 0.5 opacity, the smaller one will also show the picture with the same opacity. How do I overcome this?
Sounds like you've got an answer, but you might be interested in an implementation example anyways.
Your div with 0.5 opacity cannot be one div with 0.5 opacity. It would have to be at least 4 divs with 0.5 opacity, but would probably be most flexible as 8. They would together form 8 tiles in a 3x3 grid with no center tile. They each have 0.5 opacity, and the center tile is non-existent, so it has full opacity. Then you can freely play with the dimensions of the negative space in the middle, adjusting the sizes of the various tiles to match.
If you wanted to make the center area draggable, then it would be a 9th div with 0 opacity and a drag handler.
Hope that helps. The imgAreaSelect plugin appears to use 4 tiles, where the left and right-most tiles occupy the full vertical area (i.e. each occupies 3 spaces in the 3x3 grid).
if clearing opacity doesn't help here, you'll need to place the small div outside the main div in DOM hierarchy, than place it above the main div using absolute positioning