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.
Related
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
I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.
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.
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.
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?