Jack Ben Jack Ben - 5 months ago 7
Javascript Question

how to enlarge an element and show text on clicking

I had an image as background, and will add an elements over it (Circular points) in certain positions

enter image description here

How to make this points on clicking, enlarge and show text !?

enter image description here

If not possible with only

CSS
I wonder if
jQuery
might help.

Here jsfiddle

CSS

#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
background: rgba(26, 26, 26, 0.85);
border: 5px solid #7fcff7;
}


HTML

<div id="container">
<img id="image" src="http://s24.postimg.org/jnd9wc0n9/M7a_Uku_S.png"/>
<p id="point" style="top:15%;left:35%"></p>
</div>

Answer

Do you need like this ?

<html>
  <head>
    <style>
	#container {
	  height: 400px;
	  width: 400px;
	  position: relative;
	}
	#image {
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	#point {
	  cursor: pointer;
	  outline: none;
	  z-index: 0;
	  position: absolute;
	  width: 20px;
	  height: 20px;
	  border-radius: 20px;
	  background: rgba(26, 26, 26, 0.85);
	  border: 5px solid #7fcff7;
	}
    </style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script>
	
	$(document).ready(function(){
		text1=$("#point").text();
		$("#point").text("")
		$("#point").click(function(){
			$(this).css("width","250px");
			$(this).css("height","200px");
			$(this).css("font-size","20px");
			$(this).css("color","#fff");
			$(this).css("text-align","center");
			$("#point").text(text1)
		});
	});
	</script>
</head>
<body>

<div id="container">
<img id="image" src="http://s24.postimg.org/jnd9wc0n9/M7a_Uku_S.png"/>
<p id="point" style="top:15%;left:35%">dsadsad</p>

</div>
	  
</body>
</html>

For multi points

<html>
  <head>
    <style>
	#container {
	  height: 400px;
	  width: 400px;
	  position: relative;
	}
	#image {
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	.point {
	  cursor: pointer;
	  outline: none;
	  z-index: 0;
	  position: absolute;
	  width: 20px;
	  height: 20px;
	  font-size:1px;
	  border-radius: 20px;
	  background: rgba(26, 26, 26, 0.85);
	  border: 5px solid #7fcff7;
	  overflow:hidden;
	}
    </style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script>
	
	$(document).ready(function(){		
		$(".point").click(function(){
			
			$(".point").css("width","20px");
			$(".point").css("height","20px");
			$(".point").css("font-size","1px");
			$(".point").css("color","#000");
			$(".point").css("text-align","center");
			
			$(this).css("width","250px");
			$(this).css("height","200px");
			$(this).css("font-size","20px");
			$(this).css("color","#fff");
			$(this).css("text-align","center");
			
		});
	});
	</script>
</head>
<body>

<div id="container">
<img id="image" src="http://s24.postimg.org/jnd9wc0n9/M7a_Uku_S.png"/>
<p class="point" style="top:15%;left:35%">dsadsad</p>
<p class="point" style="top:55%;left:75%">dsadsad</p>

</div>
	  
</body>
</html>