I have a Mootools Page Peel function that works well, except that when you hover over the 'small' image(small peel), and the bigger one expands, the back image can be seen behind the front image suppose to cover it. Please see my example: http://jsfiddle.net/uc6PJ/1/
I made the animation slow so that you can see what I mean - Look at the bottom part of the effect, you will see it does not look right.
Thank You!
Related
what is the name of this effect? Above the heading What is a sofbox? I mean the wave line, like
here.
It is also above the title Readymade Multi-use Landing Homepages here. I don't know what it's called, I can't find it.
How can I make this animated effect (from the second link) and responsive as it is on that page? Can anyone help? The ideal solution would be vuejs, if possible.
You do not necessarily need Vue.js or even js to achieve that. You can do it with just CSS.
In the first example, it seems to be simply an image (white wave) positioned :after the div with the background picture. It is on the top of the actual div, you can use z-index for that.
The second example is a bit funkier. It is SVG (white wave) that is animated to move to the left. So it could really be the same picture as from the first example but you would just add animation to move the element to the left infinitely.
Have a look here. I created pretty much the same effect with SVG.
Also, have a look here - you can customise your own wave easily.
Hope it helps.
I have an HTML image of a mannequin. An image map defines body parts. I have two divs on top of the image map, one to show the hover selection and one to show the current (active part). The problem I have is: when a part is marked as 'active', I reposition the background on the 'active' layer to show a highlighted background image (a sprite map which uses a different colour. When the 'active' state i displayed, I can't click through it's transparent parts to select a different part.
One possible solution would be to use pointer-events, but I wanted to keep it as compatible as possible.
When i.e. a div has opacity:0; to make it transparent, it's still on top of other div's.
This way the div underneath won't be clickable.
This can be fixed by changing the display-mode of a div to hidden.
This way the div will be 'removed' and div's laying underneath will be clickable.
If you want to be able to click through transparent parts of an image, try using them as .PNG files.
-not sure if this might be helpful to you-
It's difficult to visualise the issue without being able to look at code or a diagram, but I've tried something in JSFiddle that may help.
In the example I've created, the 'hover' element starts off being unclickable where the 'active' element covers it (but is clickable where it is uncovered). After clicking the 'hover' element, its z-index property is altered so that it appears on top of the other elements. You can see it works because it is subsequently clickable everywhere.
Relevant jquery:
$( "#hover" ).css( "z-index", "2" );
I'm hoping this solution is helpful but, again, it's hard to tell if I've got the right idea without seeing a visual example of the original problem.
The idea behind this solution is you can rearrange the z-index values of elements upon clicks registering as many times as you need in order to make sure the relevant parts of the page are always clickable by the user.
I have a question, since I couldn't find any solution yet.
So I have this image, which is fully transparent in the "center" and partially on the border as you can see. What I'd like to achieve is, the "border" should be transparent and the "center" should be red.But the border should be fully transparent. So in this case, white.
I'm not sure if is this even possible with CSS or HTML, the reason why I need to do this in CSS or HTML because I'm looping through the database, and every displayed record would have a different background color, but the "border" should remain transparent. So creating the whole image in 10 colors or more is not an option for me, because then the site might would be too heavy.
Thank you very much guys,
Mark
EDIT:
http://i.imgur.com/yMRxtqY.png
So to be more precise, I've created another image, what I want to achieve.
At the start I got the 2 images on the left side, the first one on the top is fully transparent in the middle, and has ~50% opacity on the border as you can see, so partially transparent. The second one is just an image, but the second image is always changing, like a slideshow.
The other image to the right would be the final result, I've set a gray background to be more visible. So what I have in my mind, is that possible? What I want to achieve is to cut the slideshow images border like this. But I don't want to photoshop every image which is in the slideshow, so I was thinking, maybe I can achieve something similar like this with CSS. I'm thinking in some z-index, or something. But thats not working, because I get an image like what I've linked on the top.
This is all I got: http://i.imgur.com/g7xpgQG.png
My problem here is, I can see the image on the partially transparent border, I'd like to get something similar what is on the first image on the right (without the blue things of course, I couldn't cut it, I'm not a designer :P )
Not sure if this is what you're looking for, but take a lok at this link : http://css-tricks.com/transparency-in-web-design/
You might have to take a look at the PNG file format you're using.
First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
Curious problem here...the top 80 pixels or so of the header of my website isn't clickable. Any element in the top 80 pixels doesn't respond to hover events or clicks etc. Bringing a link down below this area with a margin-top or something makes it clickable. Even the top half of the logo image isn't clickable while the bottom half is. Really can't figure out why this happening.
The url is at http://www.vapetropolis.ca.
Why is this happening?
In future try to post questions with specific code examples so future users can easily see what's going on.
That being said, it looks like the <div class="cms-links"> is covering up the 80px you're talking about. I removed it using the inspector and the problem went away.