Develop Reference

How do I blur a particular area of an image in HTML?

The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/
Steps that I followed:
I found no way to blur a background image, so I inserted an image within a <div> with an id="background".
And then modified the CSS of it as:
#background{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.
Obviously, when I hover over it, the entire image gets clear.
But the goal is to clear the area where the mouse pointer overs at.
I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.
But I'm clueless on how to code it.

https://github.com/thdoan/magnify
A simple way would to use magnify to zoom over the already blurred image.
$(document).ready(function() {
$('.zoom').magnify();
});
img {
-webkit-filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>
<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">

Here is a pure JS solution that rely on clip-path and CSS variables, the idea is to duplicate the images to have one blurred and one not. Then we reveal the non-blurred one on the top:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
width:400px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:before {
filter:blur(5px) grayscale(60%);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/400/200?image=1069)">
</div>
With this solution you can easily do the oppsite if you want to blur a part of the image on hover:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
margin:50px;
width:200px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:after {
filter:blur(5px);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/200/200?image=1069)">
</div>

Jquery, Stopped queued functions and reset to original function

So I am trying to get this function to work. I have made other functions like this before I just like to make new things just for fun. As of now I am trying to make this image that flashes out and back in as a new image. so far it works fine but the only problem is that it gets overloaded and acts funny when clicked repeatedly. I tried putting it in JSfiddle but some of the animations appeared to not make it through. regardless I was wondering if there was a way to, if you click on something and start the function again while the original time it was clicked has not finished processing through. I could stop the function and reset it back to the beginning instead of watching the image flicker again and again until it works through the amount of times it was clicked.
HTML
<div id="menuImageDiv">
<div id="menuImageLeft"><</div>
<img id="menuImage" src="pictures/gingerbread.JPG">
<div id="menuImageRight">></div>
</div>
Jquery
$(function(){
var i = 0;
var cars = ['pictures/gingerbread.JPG', 'pictures/cupcake.JPG','pictures/cake.JPG'];
var delay = 500
function startSlide(){
interval = setInterval(function(){
var menuimage=$("#menuImage")
i ++;
i = i % cars.length;
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});
}, delay*10)
}
function stopSlide(){
clearInterval(interval);
};
$("document").ready(function(){
var menuimage=$("#menuImage");
var right = $("#menuImageRight");
right.click(function(){
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});
i ++;
i = i % cars.length;
console.log(i);
})
})
$("document").ready(function(){
var menuimage=$("#menuImage")
var left = $("#menuImageLeft")
left.click(function(){
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});
i --;
i = i % cars.length;
if (i<=-1){
i=cars.length-1;
}
})
})
startSlide();
$("#menuImageDiv").mouseenter(stopSlide).mouseleave(startSlide)
})
CSS
#menuImageDiv{
z-index:0;
position:relative;
height:500px;
width:100%;
margin: 0 auto;
top:-30px;
}
#menuImage{
width:100%;
min-height:500px;
max-height:550px;
}
#menuImageLeft{
cursor: url(http://i68.tinypic.com/2zq4h2g.jpg), auto;
margin:auto 0;
font-size:50px;
background:#3a3a3a;
padding:0 25px;
opacity:0;
top:50px;
position:absolute;
float:left;
z-index:5;
width:47%;
height:400px;
}
#menuImageRight{
cursor: url(http://i63.tinypic.com/2mni1ky.jpg), auto;
font-size:50px;
background:#3a3a3a;
padding:0 25px;
opacity:0;
top:50px;
float:right;
position:absolute;
z-index:5;
width:50%;
height:400px;
left:50%
}
.nopacity{
opacity:0;
}
https://jsfiddle.net/nathanahartmann/30d0ause/8/
P.S. I've been looking into .stopPropogation() and .stopImmediatePropogation() and .stop() and none of them have worked as desired.

Since you are using jQuery. Please look at these documentation.
jQuery Finish
jQuery Stop

Jquery UI toggleClass has a callback function for when the animation completes
menuimage.finish().toggleClass('nopacity', delay,function(){
menuimage.attr('src', cars[i]);
menuimage.toggleClass('nopacity', delay);
});
demo:https://jsfiddle.net/w4dnb7qd/

How to "dim" certain area in a webpage

I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?
I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.
<div id="dimmer"></div>
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}

It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.

.area-to-dim {
position: relative;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
HTML
<div class="area-to-dim">
<div class="dimmer"></div>
</div>

Two ways, one really simple but I'm not 100% sure this is what you wanted.
First way, use CSS
.genericClassGivenToDivs, #idOfDiv {
background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
background:#aaa;
}
The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.
<html>
<head>
<style>
body {
margin:1em;
background:#ddd;
}
#contain {
margin:auto;
width:100%;
max-width:720px;
text-align:center;
}
#row1, #row2, #row3 {
width:100%;
height:48px;
line-height:48px;
color:#000;
background:#fff;
}
#row2 {
background:#eee;
}
#dim {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
//console.log('over:['+ this.id +']');
dimEl.style.top = this.offsetTop +'px';
dimEl.style.left = this.offsetLeft +'px';
dimEl.style.height = this.offsetHeight +'px';
dimEl.style.width = this.offsetWidth +'px';
dimEl.style.display = 'block';
}
window.onload = function() {
var list = ['row1', 'row2', 'row3'];
var e;
for(x in list) {
e = document.getElementById(list[x]);
if (e) {
e.onmouseover = over;
}
}
}
</script>
</body>
</html>

Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.
I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.
I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.
Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.
If this sounds applicable, see this jsFiddle

Why the display is none?
Check this?
#dimmer {
background: #111;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 9999;
/* may not be necessary */
}
#dimmer:hover {
background: #000;
opacity: 0.5;
transition: opacity 1s ease;
cursor: pointer;
}
<div id="dimmer">ok</div>

I need to close a gap in this JQuery animation

Here is my Jquery code:
var img = function() {
$(".slider#1").delay(1000).fadeIn(1000);
$(".slider#1").delay(3000).fadeOut(1000);
$(".slider#2").delay(5000).fadeIn(2000);
$(".slider#2").delay(3000).fadeOut(1000);
$(".slider#3").delay(10000).fadeIn(2000);
$(".slider#3").delay(3000).fadeOut(1000);
$(".slider#4").delay(15000).fadeIn(2000);
$(".slider#4").delay(3000).fadeOut(1000, function() { img() });
};
Essentially what I am trying to do is when one image fades out I would like an image to almost be behind it and fade straight into that without being a blank space in between, is this possible?

You could use the jQuery fadeTo function.
Like
$(".slider#1").fadeTo(1000,1);
And make all your sliders overlap each other with opacity 0.
Edit :
You can try this fiddle :
http://jsfiddle.net/8cwA6/22/
It recursively changes the opacity. All the images are on top of each other, then it fades out Level 1, then Level 2, and then fades both of them back (because Level 3 is on the bottom). You'll probably understand better when you see the code.
JavaScript
var max = 3
var min = 1
var showTime = 1500
function fade(num) {
if (num > min) {
$('.' + num).delay(showTime).fadeTo("slow", 0, function() {
fade(num - 1);
});
} else {
$("div").delay(showTime).fadeTo("slow", 1, function() {
fade(max)
});
}
}
fade(3);
HTML
<div id="img1" class="1"></div>
<div id="img2" class="2"></div>
<div id="img3" class="3"></div>
CSS
#img1 {
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :1;
}
#img2 {
width:100px;
height:100px;
background-color:blue;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :2;
}
#img3 {
width:100px;
height:100px;
background-color:green;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :3;
}

You have to queue the animations, or they will get mixed up after some time, since your animations are running asynchronous;
I did stack all images, and all are visible (you could set z-index just to be certain).
Fading out the top most, the next one is showing up.
The bottom most, doesn't have to be faded. I fade in the first one again, before resetting/showing all the other images once again and resetting the recursion.
jsfiddle
http://jsfiddle.net/Drea/hkzbvew4/
js
var images = ['.slider1', '.slider2', '.slider3', '.slider4']; // .slider4 is always visible
var img = function (i, showtime, fadetime) {
$(images[i]).delay(showtime).fadeOut(fadetime).queue(function () {
i++;
if (i < images.length-1) { // run through images
img(i, showtime, fadetime);
$.dequeue(this);
} else { // reset animation
$(images[0]).delay(showtime).fadeIn(fadetime).queue(function () {
$(".slide").fadeIn(0);
img(0, showtime, fadetime);
$.dequeue(this);
});
$.dequeue(this);
}
});
};
img(0, 1000, 1000);
html
<div class="slide slider4"></div>
<div class="slide slider3"></div>
<div class="slide slider2"></div>
<div class="slide slider1"></div>
css
.slide {
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
}
.slider1 {
background-color: black;
}
.slider2 {
background-color: green;
}
.slider3 {
background-color: blue;
}
.slider4 {
background-color: red;
}

javascript and css not working in safari and ie

I'm working on this site, which works good in Chrome and Firefox, but not in Safari or IE.
The round images should change to full size (650px width) image when clicked in a 0.6s transition.
In Safari the border radius in the images is ignored (they are square divs), and the transition doesn't work well, images overlap during transition time..
In Internet Explorer the javascript doesn't do anything, javascript is working, you can see in the paragraph above the images, changing the language works (that's js).
I'm green in all this, so I would like to know what's wrong with this.. how can I fix it?
As far as I know this is not hard for browser to do, and I know the fame IE has, but still this is simple javascript, it has to work doesn't it?
This is how the html of each image looks:
<a name="t1"></a>
<a href="#t1">
<div class="galeria">
<div class="normal" id="t1" onclick="SelectOrUnSelect(t1)">
<img src="galeria/obra/1.Naturaleza.jpg" />
<p>Relato I. Naturaleza</p>
<p>Tale I. Nature</p>
</div>
</div>
</a>
Here's the javascript that changes the class of the images:
var divSelected = null;
function SelectOrUnSelect(x)
{
if(divSelected != null) divSelected.className = 'normal';
divSelected = x;
x.className = 'activa';
}
and the css:
.normal{
width:200px;
min-height:0;
max-height:0;
padding:100px 0;
margin:20px auto;
overflow:hidden;
-webkit-border-radius:100px;
-moz-border-radius:100px;
-o-border-radius:100px;
border-radius:100px;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
}
.normal img{
overflow:hidden;
margin:-100px 0;
width:150%;
position: relative;
left: -30%;
top:0;
}
.activa{
width:100%;
min-height:400px;
border-radius:0;
padding:0;
margin:0 auto;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
display:block;
}
.activa:last-child{
margin:0 auto 55px auto;
}
.activa img{
width:100%;
-webkit-border-radius:0.2%;
-moz-border-radius:0.2%;
-o-border-radius:0.2%;
border-radius:0.2%;
}
Thanks for reading and helping!

Here are a few things to try.
Fix the doctype, it should be: <!DOCTYPE html>
Use getElementById:
function SelectOrUnSelect(x) {
if (divSelected != null) {
divSelected.className = 'normal';
}
var el = document.getElementById(x);
divSelected = el;
el.className = 'activa';
}
and change the inline code param to a string, e.g.:
SelectOrUnSelect('t1')