CODEWITHSUNDEEP
jquerycss
Reham Fahmy
Reham Fahmy

Reputation: 5063

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>

Upvotes: 0

Views: 119

Answers (2)

Mani
Mani

Reputation: 2655

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>

Upvotes: 2

Arun AK
Arun AK

Reputation: 4370

Yes, you can achieve it using jquery.

  1. Just append a div and make its display as Hidden

  2. Then, on the click of the circle, get the pageX and pageY value of the click event and apply it on the div

    $("#point").click(function(e){
    $(".showDiv").slideToggle();
    $(".showDiv").css({
      "top": Number(e.pageY)+"px",
      "left": Number(e.pageX)+"px",
    });
    $(".showDiv").text("PLace Text");
});

Here is the Link

Hope it helps :)

( Updated the code for Toggle effect :D )

Upvotes: 1

Related Questions