[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 691
  • Last Modified:

css transform scale based on mouse X position

Hi

i want to scale imagery based on X position of the mouse

i want to scale it very subtly, so maybe 1.0 - 1.9 - no larger

How can i do this?

Thanks
0
coolispaul
Asked:
coolispaul
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
0
 
coolispaulAuthor Commented:
i would rather do the zoom with css

i just need a way to generate numbers 0.1 - 0.9 based on mouse x position

Ta
0
 
Pierre CorneliusCommented:
To my knowledge this can't be achieved with CSS only. You can do it with Javascript and jquery like this:
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<style>
	#container {width:200px; margin: 0 auto;}
	.test {
		background: url("bkg.png") no-repeat scroll center center rgba(0, 0, 0, 0);
		color: #FF0000;
		font-size: 50pt;
		height: 100px;
		text-align: center;
		width: 200px;
		}
	</style>
	<script type="text/javascript">
	$(document).ready(function() {
		$(".test").mousemove(function(event){
			var x = event.clientX - event.target.offsetLeft;
			var mid = event.target.clientWidth/2;
			var w = parseInt((1-((x<mid)?x:mid+mid-x) / mid) * 100);
			$(".test").css('background-size', w+"%");
		});
		
		$(".test").mouseleave(function(event){$(".test").css('background-size', "100%");});
	});	
	</script>
</head>
<body>
	<div id="container">
		<div class="test">div1</div>		
	</div>
</body>

</html>

Open in new window

bkg.png
img-scale-mousemove.html
0
 
Pierre CorneliusCommented:
May i enquire, why a b grade?
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now