I'm trying to create a situation where I have 4 columns that split the entire view. I'd like to implement a hover effect that occurs when the columns are hovered over.
I'd like each columns background to scale up slightly, but only within its allocated 25% (width) and 100% (height) area, but have one word related to that column appear vertically centered across the entire screen with a width of say 90% and a semi-transparent overlay color. This would have to not be affected by the 25%, 100% rule the background is restricted by.
I have tried and tried and can't figure it out for the life of me.
I'm not going to write the code for you, but I would recommend to do this you use JavaScript.
You could have hidden elements (for the centred text, with the properties you've described) which are positioned absolutely which then become visible once you've hovered over the relevant column. This is why you'll need to use JavaScript, to have an event listener on each of those columns and show the relevant centred text when hovered over.
Related
I'm trying to achieve a metaball effect by blurring svg's (CSS Blur), then applying CSS contrast to the parent div to get hard edges back. Below is an example. For some reason, the filter does a weird thing on the edges.
I believe i would need to first extend the div to be bigger than the viewport, but some elements are dependent on VW and would therefore scale in an unexpected manner.. Anyone have an idea of how to expand the filter past the viewport edges?
Don't really know how to approach this, i would like the blur to extend past the viewport but retain current layout.
EDIT:
Needed to add white background to container div to make the contrast behave in the way i wanted. ( not go crazy on the viewport edges)
im a designer trying to prototype a unique scroll behavior. Please bear with me.
Here's a GIF animation
Context:
Basically, i want a div to change height (up or down to an arbitrary
height) based on its position in a parent.
Specifically, a div should decrease in height, down to 0, as it
leaves the parent's view and increase, from 0, otherwise.
When you combine this with rounded corners, it gives a unique effect.
I have mostly been experimenting with getBoundingClientRect in the context of a parent div, and using different math to change the style/height of the div.
So far, the effect doesn't work so smoothly.
Here's a working demo (the pink rectangle is the one that should change, i have not figured out how to apply the effect to all of them, but that's a seperate q :)
I am trying to get the NVD3 tooltip to go above all other divs. The problem is that I have three charts in a row, and very large tooltips that spill out of their div. I can set the z-index on one or the other side, but one will always be below another.
For example, if I set the center div to have the highest z-index, then the tooltip generated from the left or right side is cut off in the center area, and so on.
Changing the z-index of the tooltip doesn't have any effect, as it's ultimately a child of the respective chart. How can I make it stay above everything?
Easy fix was to add a CSS3 hover selector to the divs that increased the z-index.
long time listener, first time caller.
I have a matrix of icons that can be navigated horizontally in a carousel, and vertically as categories (which are rows of icons) that are detached/appended as the app cycles through the categories with up/down arrows.
I want to make the lowest row of icons fade in opacity (I have a black background) from the native colors of the icons into blackness as you go from top to bottom, to indicate that there are subsequent rows beneath. The only way I have been able to determine how to do this is using background: -webkit-gradient, as indicated here:
CSS3 Transparency + Gradient
I apply this to a DIV which I overlay above my lowest row. Unfortunately, I lose clickability of the items behind the overlaid div. I have to use the overlay, however, because the property is a background property.
Is there any other way I can implement a gradient opacity on a row of clickable icons that fades to black without sacrificing the clickability? I don't want an overlay that only covers the lower 25%/whatever either... I need an all-or-nothing solution to this. So far it's looking like "nothing" is my only option.
Thank you very much in advance.
Hmmm... two solutions come to mind.
First, you could use the overlay, and track mouse events on that element. Then, with some math, you could probably figure out what the underlying element is use jQuery to trigger the click of that element (ie. $("#icon14").click(); ).
The second option would be to draw out a companion transparent div with each icon you make in your matrix. Place it in exactly the same spot as the icon itself, but give it a css z-index that brings it above the overlay. This transparent div can now handle all the mouse events for you, and still live above the overlay.
If you go down this road, I'd look into using the .data() function that lets you quickly tack on variables to any jQuery object. You can set this companion div to be a property of the normal icons in the matrix, with something like $("#icon14").data('clickDiv', $("#icon14_click")); (though you'd probably want to assign these in a loop or something =)
Good luck!
I'm designing a page that has a Content Area which scales against a diagonally striped background.
The Content Area div is a fixed width that will scale vertically with content. Because the border is a drop shadow, I have a repeating background image (40px wide by 80px high) that has to line up with the page background image. I need the div to scale in multiples of 80px high so that the repeating backgrounds concur with each other.
Is there an elegant solution that will allow me to scale the Content Area div so that it always displays at a multiple of 80px high? If not, is there another approach I can take to solving this problem rather than scaling the div to a multiple of 80px?
Thanks in advance!
Ryan
Unless you absolutely need the drop shadow to appear in older browsers, you can generate it with the CSS3 box-shadow property instead of using an image. This is much more flexible as the shadow is generated by the browser and will fall nicely on the background regardless of how things line up.
Jimmy's idea is solid, assuming the browser supports this css property. Another, weirder idea to consider might be to have jquery insert a div into the DOM that has fixed positioning and is offset to your content div and a z-index that would put it behind your content div. Then you could this new under-div an opacity (you can use fadeTo but maybe there's something better). Basically give the content div a real shadow by having an identically sized div underneath with 50% opacity.
why dont you leave the stripped background out of the content areas and use a transparent png for the images that will use a drop shadow. Since you're already trying to use javascript to fix a css problem, why not use DD_belatedPNG so that the alpha transparency will display correctly in IE6