• Locked
2 replies [Last post]
Wed, 2010-06-09 04:07
nanacss
nanacss's picture
User offline. Last seen 25 weeks 5 days ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT+8
Joined: 2007-07-27
Posts: 99
Points: 10

Hi there,

Is anyone know how to create this?
Or is there any free tutorial for it?

http://www.apple.com/iphone/features/retina-display.html

I like this bcos the magnifying glass is "circle" and it is not flash~

Any suggestion or tutorials pls post here~ Thanks ^^v

v^^v

Top
Tags:
Wed, 2010-06-09 04:28
#1
Tony
Tony's picture
User offline. Last seen 3 hours 54 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2003-03-12
Posts: 3809
Points: 1244

Try something like:

Try something like: http://huydinh.co.uk/blog/2008/09/04/my-jquery-magnify-plugin/
or search: http://www.google.com/search?q=jquery+magnifying+glass

Your question may have already been answered, search and read before you ask.

Top
Fri, 2010-06-11 03:59
#2
nanacss
nanacss's picture
User offline. Last seen 25 weeks 5 days ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT+8
Joined: 2007-07-27
Posts: 99
Points: 10

Hi Tony, Thanks for your

Hi Tony,
Thanks for your reply and example.

And I realised the rounded/circle magnifying glass is done by css!

.HoverZoom {
	width: 220px;
	height: 220px;
	position: absolute;
	top: 50px;
	left: 20px;
	z-index: 100;
	background-position: -118px -247px;
	cursor: none;
	border: 3px solid #fff;
	*border: 0;
	-moz-border-radius: 110px;
	-o-border-radius: 110px;
	border-radius: 110px;
	-webkit-border-radius: 110px;
	-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .6);
	-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .6);
	-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .6);
	-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .6), inset 0 0 5px rgba(0, 0, 0, .25);
	-webit-transform: translate3d(77px, 138px, 0);
}

though some codes I dun really understand. haha!

v^^v

Top
  • Locked