Develop Reference

Img tags clashing

I am building a website and on the landing page I have a couple of images with a javascript interaction. These are being brought by javascript instead of html and they are on an .img on css.
``` img{position: absolute; top: 500px; left: 400px; transform: translate(-50%, -50%) scale(0.2); animation: fadein 0.5s;} ```
On the second page of the website I have more images but I have put them together as grid with Responsive equal height images using CSS.
.img {width: 100%; height: auto; vertical-align: middle;}
My problem is that the second page is using the .img attributes from the first page and not the second one and I am not sure how to differentiate them?
Here's a picture of how the left page should be looking vs how it's looking.
picture of what should be looking vs how it's looking
I am really running on a tight deadline but I can't seem to fix this, does anybody know what could I do? :(
Thank you so much!

The img selector is too vague, it will target any img on the page. You should make it more specific.
You have to create a different CSS class for each case.

The problem is you are using img { } in CSS. This is fine for when you want all the images to be styled the same way, however you want separate styling for separate images. To overcome this we use selectors.
Use a class. A class selector will only style tags that have class="" in them, in this case <img> tags
img.page1 {
position: absolute;
top: 500px;
left: 400px;
transform: translate(-50%, -50%) scale(0.2);
animation: fadein 0.5s;
}
img.page2 {
width: 100%;
height: auto;
vertical-align: middle;
}
Now if you add class="page1" and class="page2" respectively to your images and/or containers, the images will use the CSS formating for their own class.
Something like this <img class="page1" src="my_image.jpg">
Or <div class="page1"> (<img> tags here...) </div> will also work and will save you putting the class for each <img> tag

Blur Background Img, Overflow Hidden, Align with parent div

I have done some research on this, but none of the answers are helping me with my issue. Here is a JSFiddle to show what I have so far.
Problem:
I am having an issue when it comes to over flow, as you can see the
background image is overflowing the wrapper.
Next issue, The background image doesn't look to be auto filling to
the wrappers width. I'm assuming that when the overflow issue is
fixed that this might not be a problem anymore.
Lastly, when we can fix everything, is there a way to make the
wrapper extend to the height of the background image without
specifically setting the height myself.
Here is my code:
#wrapper {
margin: 0 auto;
width: 70%;
border: #000000 solid 1px;
overflow: hidden !important;
}
.content:before {
content: "";
position: fixed;
z-index: -1;
background-image: url(../images/10034277536_1454f4e382_background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
}
.content {
z-index: 0;
}
<div id="wrapper">
<div class="content">
Hello world
</div>
</div>
Thanks for any help.

Have a look at: https://jsfiddle.net/5mahg3fp/
.content {
position: relative;
background-size: cover;
}
.content:before {
position: absolute;
}
Positioning the element absolutey instead of fixed and relatively to #content will fix your first problem.
Setting the backgrund-size to cover makes the background grow to the size of the element.
To have an element automatically growing to the size of the background assigned you would have to insert the background as an actual image, positioned statically. The you could add your content to a absolutely positioned child that covers the whole area.

You can make it appear that your image is overflowing across the entire page, add gradient to the bottom of the image (for e.g. #029d7e), then set the background color as the gradient.
background: #029d7e url("http://iforce.co.nz/i/gvudoqvz.ago.png") repeat-x;
https://jsfiddle.net/24wkdof5/
If you want your child element to grow with your parent element, you need to mark both elements with height attribute (either 100% or fixed height).

Setting pseudo element background image using javascript

I am having a div with before selector. I set the background of this div and added CSS blur filter to it. I need to change the background image of this pseudo element dynamically using javascript. When I manually give a location for the background, it works fine and I succeeded in setting the image dynamically by appending the style to the head tag but the image won't resize. I need the image to be stretched to the full width of viewport but it is displayed in its original size only. Here is my CSS and javascript
CSS:
.content-wrapper::before {
position: fixed;
z-index: -1;
display: block;
width: 100%;
height: 100%;
/* background: url(/landing/images/profile.jpg); */
background-size: cover;
-webkit-filter: blur(25px)brightness(.7);
-moz-filter: blur(25px)brightness(.7);
-o-filter: blur(25px)brightness(.7);
-ms-filter: blur(25px)brightness(.7);
filter: blur(25px)brightness(.7);
}
Javascript:
$('head').append('<style>.content-wrapper::before{background:url('+response.data.url+') no-repeat}</style>');
This is the result now:
Update: Solution
Alex's fiddle link in the comments section worked like a charm. I had to change the position:fixed and background to position:absolute and background-image

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');
}

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);
}