LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.img-wrapper{
	margin:10px auto;
	width:500px;
}
.img-wrapper img{
	position:relative;
	float:left;
}
.overlay{
	position:relative;
	width:500px;
	height:500px;
	float:left;
	left:0;
	top:-500px;
	z-index:2;
}

.spot{
	border-radius:50px;
	background-color:red;
	width:50px;
	height:50px;
	position:absolute;
	z-index: 1;
}
JS
$(document).ready(function(){
	document.getElementById('overlay').addEventListener("click", clickHandler);
});

function clickHandler(e){
	console.log(e);
	var element = document.createElement("div");
	element.className += " spot";
	element.style.top = (parseInt(e.clientY) - 35)/5+ "%";
	element.style.left = (parseInt(e.clientX) - 360)/5 + "%";
	document.getElementById("overlay").appendChild(element);
}
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv