Jack Ben Jack Ben - 1 year ago 50
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 Source

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>