We Keep Coding

Absolute positioning on two overlapping html images while STILL being able to click?

So, I have two images I want to position over each other. Back image goes in the back, center image goes on top of it, and a random link (in this case google.com) goes on top of a specific drawn blue box on the center image.
I want to use absolute positioning so that the random link stays on the exact same part of the image. The reason the center image is separated from the back image is that later I want to do parallax scrolling where the background scrolls slower than the foreground. Also I'm going to add one more layer even further back later when I do the parallax thing, but for right now I'm just doing two.
This is the code that I have:
<div style="position: relative; pointer-events: none">
<img src="/static/CenterImage.png" style="width: 100%; height: auto; z-index:5; position: absolute; pointer-events: none;">
<img src="/static/BackImage.png" style="width: 100%; height: auto; position:absolute; z-index:4; pointer-events: none; ">
</div>
I for the life of me, cannot click that bottom link. When I delete position:absolute in the top image, suddenly I can no longer see the back image, but I can now perfectly click the link on the blue box.
How do I do this :(

you can put
pointer-events: none;
to styles of your elements/images that you don't want to be clickable and block the proper link

image floating out of parent div for no reason

The title may be a little bit unclear, but I have an <img> tag generated by the WordPress shortcode: the_post_thumbnail('thumbnail'); and I placed this inside a parent div, to give it the right place in the website.
single.php has this inside:
<div class="newsidebar">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
HTML output:
css styling for .newsidebar
.newsidebar {
width: 30%;
position: relative;
left: 100%;
transform: translateX(-100%);
height: 500px;
margin: 4em 0;
}
expected output is just this image sitting inside my .newsidebar div, but actually it's stuck at the bottom of the page for no reason. There is no padding/margin pushing the img down, no position absolute with top/bottom styling.
Is there another css reason that I overlook why it wishes to sit ~1000px lower in the site then expected?
actual output on site:
What did I try to fix this?
giving the img:
positions,
margin,
top,
bottom,
but the only thing that actually got it to stay inside the parent was
.newsidebar > img {
position: absolute;
top:0;
left:0;
}
downside of this code, I don't want to use position absolute, as there are widgets/ other elements being added inside newsidebar. which will then hover above or below this image.
any CSS/JavaScript/jQuery solutions are helpful.
edit I fixed my issue using another WordPress function named get_the_post_thumbnail_url() and adding that url to the background of a div inside my .newsidebar div. but I am still curious to find out why this <img> was taking a trip down my website.

Added css to a div containing img, makes it unclickable in jQuery

I'm using jQuery Mobile, to create a small mobile app. I have a page which includes just a GIF. Though the GIF can be clickable, to move to the next page. But the point is that the GIF is not full screen in some devices, so I added some CSS to make it full screen, meaning to stretch it, which works, but then it makes the div (or GIF) unclickable. So I cannot click it to move to the next page, you need to wait for the animation to finish.
Here is how the page is defined in HTML:
<div id="correctGIF" data-role="page" data-add-back-btn="false">
<img src="images/Correct1.gif">
</div>
I added this CSS:
#correctGIF {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: -1;
}
#correctGIF > img {
width: 100%;
height: 100%;
}
Is there any way, how can I stretch the GIF to make it cover the whole screen, without making it unclickable?

It is z-index problem. Because you set z-index: -1; so that the div is unclickable. Change z-index to postive integer or remove z-index in css

Blur background - Jquery / Pure CSS / Image?

I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.
The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app
(https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540)
but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!
Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?

There is a jQuery plugin called blur.js that claims to do what you want. Haven't checked it though.

I don't know if this will help, but it gives a blur effect.
A similar question was asked here:
Background blur with CSS
The developer used a svg blur to give a blur effect.
Don't know if that helps.

I just figured out how to do this! The background and the content divs both need to have the same background with the same positioning/size. and use background-attachment: fixed on both of them. You can blur the div with -webkit-filter: blur(5px);. You may need to use z-index depending on the location of other things on the page. Also if you want content inside the blurred div it will have to be in a completely separate div positioned on top of it, otherwise everything inside will get blurred too. Here's the code:
<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
<div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
<div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;">
</div>
</div>
<div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
<p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
</div>
</div>
</body>
I couldnt get jsfiddle to work for this, so if someone could make that it would be awesome. The whole idea here is that both the divs have the exact same content in the same place. That way no matter where the blurred div moves it will look like its blurring the background.

you can probably use the css3 filter:blur() property to get the image blurred, but you would need to have the background image the same (and in the same position) as the background element. you would also need to make sure that the blurred element is separate from the content you want to add (:before) because otherwise it'll blur the content as well. You can change the saturation, and other elements as well using the filter property.

Z-index does not work as expected?

I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.

Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?

If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.