Develop Reference

Blur changing elements behind div

First of all I want to make clear that I already have searched for some solutions. And I also have seen some 'blur issues' here on stackoverflow. But mine is just little different.
I want to blur the part of a slideshow that falls behind a transparent div element. On my testserver I have a preview to make it understandable you can check it here.
The things I have already tried:
- blurjs.com
- CSS only blur wich you can check here
- Google
These two basicly do the same, both the solutions don't support changing backgrounds. Maybe you guys know a solution.
I hope you can help me. Thanks.
The code I have till now:
<div id="blur-overlay"></div>
<div id="slideshow">
<div class="slide active"><img src="http://www.zastavki.com/pictures/originals/2012/Space_Earth_from_space_035859_.jpg" alt="Slideshow Image 1" /></div>
<div class="slide"><img src="http://www.zastavki.com/pictures/originals/2012/Space_Full_Moon_from_the_Earth_035858_.jpg" alt="Slideshow Image 2" /></div>
<div class="slide"><img src="http://i.space.com/images/i/000/005/402/original/hubble-space-bubble-photo-2-100622-02.jpg?1292270748" alt="Slideshow Image 3" /></div>
</div>
and the CSS:
#blur-overlay {
width: 250px;
height: 250px;
border-radius: 100%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 105px;
left: 50%;
margin-left: -125px;
z-index: 100;
}
#slideshow {
position:relative;
height:300px;
width:1000px;
float: left;
overflow: hidden;
}
#slideshow .slide {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow div {
display: none;
}
#slideshow div img {
width: 100%;
float: left;
position: relative;
}
#slideshow div.active {
display: block;
z-index:10;
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
}

(as far as I'm aware) There is no easy way to make that happen. This is because CSS blurs only apply to specific elements. So you could blur your transparent circle, but it will not affect whatever is behind it.
The only possible solution I can think of would be to have TWO slideshows running at once. The one you already have, and then a second one on top. The second one would have CSS blur applied. Then on the blurred slideshow, you could use CSS to make it a circle with overflow hidden.

EDIT: I misunderstood what was trying to be done. The poster wishes to blur the background behind a div and not the div itself. Only way to do that is to have a part of the image blurred, which is actually also covered in the article. Also refer to the other answer.
Original:
I think this is a symptom of not reading through the articles fully. Here's a code example right from the article(CSS Gaussian blur behind a translucent box):
#search {
filter: blur(10px); /* Doesn't work anywhere yet */
-webkit-filter: blur(10px);
filter: url('blur.svg#blur'); /* for Firefox - http://jordanhollinger.com/media/blur.svg */
}
On looking at your site, I saw this:
#blur-overlay {
filter: blur(15px);
}
The article clearly states that this css property doesn't work anywhere. It goes on with code examples of what works(this is what I gave you).
For firefox compatibility, it links to an svg document's blur definition.
To do this specific thing, create an svg file(you can embed this into your document or host it somewhere else):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="svg_blur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
</svg>
Add the corresponding url() to your css file like this:
#blur-overlay {
filter: blur(10px);
-webkit-filter: blur(10px);
/* If you're using an SVG in the document */
filter: url('#svg_blur');
/* If you're using an SVG hosted on your web server, say at /static/blur.svg */
filter: url('/static/blur.svg#svg_blur');
}

How to create trapezoid div with background repeat

I want make a image background like this in a div like the following image.
but I can't find any appropriate css or js properties for this.
Is anyone can help to find out how this possible ?

Looks like CSS 3D Transforms. Here's the webkit way of doing it, tweak the angle and perspective as needed. You'll have to find something equivalent for other browsers, I don't think it's fully standardized yet.
Just apply this CSS to your div with the background image. I tested this with the lovely stackoverflow logo at the top of this page, which is a div with a background image.
Edit: And here, a red border too. Don't know if its part of the image or you need CSS for it as well.
-webkit-transform: perspective(500) rotateY(-60deg);
border: 3px red solid;

It will help you
Transform properties of css
http://www.w3schools.com/cssref/css3_pr_transform.asp

I have found a nice solution and solved the problem with the help of Cubicle Dragon like following-
HTML code
<div id="div1">
<div id="div2">HELLO</div>
</div>
CSS code
#div2 {
background: url("") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #000000;
padding: 50px;
position: absolute;
transform: rotateY(-234deg);
}
#div1 {
border: 1px solid #000000;
height: 150px;
margin: 50px;
padding: 10px;
perspective: 89px;
position: relative;
width: 150px;
}

How can I make a div horizontally slide in?

I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.

Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>

My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.

Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.

There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.

This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast

Blur Img's & Div's in HTML using CSS

Is it possible to apply a blur to an HTML element(div & img)?
I am developing solely for the iPad so cross-browser compatibility is not an issue & I can use HTML5 CSS3 techniques.
I know how to blur text but this CSS doesn't blur the actual HTML element or its border:
text-shadow: 0 0 8px #000;
color: transparent;
I googled this but it doesn't blur the image in my browsers:
filter: blur(strength=50);

Webkit has a property called -webkit-filter that allows for the techniques of blurring: -webkit-filter: blur(15px);
http://jsfiddle.net/danielfilho/KxWRA/

You can simply add this to your css, for an image:
In the following example, you'll be using a blur with 5 pixels of radius. And it is extremely important to use all vendor prefixes available, so it works on all browsers with this feature implemented, untile it comes to a "stable" version.
img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}

I think the best way is to layer the same image over itself a few times and test different positioning and opacities on the overlayed ones.
Here's the CSS that I came up with. Keep in mind I'm using the nth-child CSS3 selector (but you don't seem to have an issue with that):
img {
width:300px;
height:300px;
position:absolute;
opacity:0.2;
}
.container {
position:relative;
overflow:hidden;
width:300px;
height:300px;
}
img:nth-child(1) {
opacity:1;
}
img:nth-child(2) {
left:2px;
top:2px;
}
img:nth-child(3) {
left:-2px;
top:-2px;
}
img:nth-child(4) {
left:-1px;
top:-1px;
}
img:nth-child(5) {
left:1px;
top:1px;
}
HTML:
<div class="container">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
</div>
The result is pretty promising.

CSS does not have the ability to blur, besides techniques with text-shadow and box-shadow. But even with these, borders and images aren't able to be blurred.
This JavaScript library, however, can handle images.
Also, you may find this technique interesting. It's a neat illusion using pre-fabricated blurry images.

I had to pretty thoroughly research this problem not too long ago and came up with an extremely flexible solution, though it may be overkill for some people's needs. I needed not only blurred images, but also a dynamic blur radius, overlay color, and overlay opacity for various kinds of images. I also needed to have the option of just blurring an image in a background with other elements overlayed on top of it. Here's the best cross-browser (and performant) solution I was able to create.
First, I'd have an SVG on hand, uninspiringly called blur.svg. It applies a blur filter and if you look closely, the stdDeviation (which sets the blur radius) is actually set programmatically from a passed in parameter to the URL requesting the asset.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="#{params[:blur]}" />
</filter>
</svg>
Then I had an SCSS mixin that would allow one to add a blur overlay to any wrapper, with a customizable blur radius, overlay color, and overlay opacity.
#mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) {
position: relative;
.background_blurred {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter: url('blur.svg#blur?blur=#{$blur_radius}');
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}');
transform: translateZ(0);
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: $overlay_color;
opacity: $overlay_opacity;
}
}
.foreground {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
}
You may be wondering why I included a transform: translateZ(0);. The only effect that has is to force hardware acceleration on the render to keep things performant. You may also be wondering why there are no vendor prefixes. You can look up things like filter on CanIUse if you want, but I used autoprefixer on this project to worry about that stuff for me. And of course, why filter using this SVG, rather than with something like blur(4px)? Wouldn't that be easier? It would, but Firefox (as of writing) only supports the filter property with a URL.
Then you can apply the blur mixin to a wrapper class:
.my_wrapper_class {
#include background_blurred(3, #f9f7f5, 0.7);
}
Notice that for this method, we have to use a class with a custom background set in a style attribute instead of an image tag with a src. You can tweak the background position and override the background size to your liking.
<div class="my_wrapper_class">
<div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div>
<div class="foreground">
<p>Stuff that should appear above the blurred background and not be blurred.</p>
</div>
</div>

With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
See live demo and complete source code here
http://purpledesign.in/blog/adjust-an-image-using-css3-html5/
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}

jquery or javascript active element on foreground, lock background?

I have a layer that is presented by a logic var.
that layer is just a hidden div - how do I make it so the layer is the only element that can be interacted with on the page when it is visible?
thanks!
Update:
used a full size div in the background with a transparent gif - works in firefox, but not IE - thoughts?
#overlay {
background-image: url('../images/transparent.gif');
width:100%;
height:100%;
z-index:8999;
display:none;
margin-top: 0;
margin-left:0;
position:fixed;
}

The basic approach is to put a semi-transparent element over your whole page, but under your modal window that contains your focus element. JQuery doesn't have this built in, so you can either create your own using that approach or use a JQuery plugin.
UPDATE:
Here's a fiddle based on the comment discussion. I've tested this and it works in IE8, Firefox 3.5.15, and Chrome 12.0.742.112.
HTML:
<div class="overlay"></div>
<div>test</div>
<input/>
<div class="modalWindow ">
foo:
<input/>
</div>
CSS:
.overlay {
opacity:.1;
filter:alpha(opacity=10);
background-color: black;
width:100%;
height:100%;
z-index:8999;
margin-top: 0;
margin-left:0;
position:fixed;
}
.modalWindow {
z-index:9000;
position: fixed;
background-color: white;
top: 20px;
left: 20px;
width: 200px;
height: 100px;
}

It sounds like you are creating a modal dialog. You can use jQueryUI to handle this:
http://jqueryui.com/demos/dialog/#modal-confirmation

Sounds like you're looking for a modal
You can use a jQuery UI Modal

BlockUI jQuery plugin is an alternative to using jQuery UI modals. This is a neat demo that shows how you can disable a specific background element in a slightly different fashion: http://jquery.malsup.com/block/#element

To answer your question update:
You could make your gif transparent with CSS2.1 and CSS3 because there are problems with transparent gifs/pngs in some browsers:
#overlay {
background-image: url('../images/transparent.gif');
width:100%;
height:100%;
z-index:8999;
display:none;
margin-top: 0;
margin-left:0;
position:fixed;
/* for IE, the filter only works reliably on positioned elements */
filter: alpha(opacity=40); -moz-opacity: 40%; opacity: 0.4;
}