Solved

css transform scale based on mouse X position

Posted on 2014-03-19
4
557 Views
Last Modified: 2014-04-07
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
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39939340
0
 

Author Comment

by:coolispaul
ID: 39939345
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
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 500 total points
ID: 39942216
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
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39982747
May i enquire, why a b grade?
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question