[Tut] Pure CSS Image Magnification Effect

6 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Click Here: To see this effect in action!
Well the title's pretty self explanatory, and this hast to be one of the easiest effects to create, so lets get to it.

Setting Up:
First off make a new folder on your desktop called "CSS Magnification".
Inside that folder place the image you wanna use for this effect.
I'll be using this picture I took of my dog Pal earlier today for this tutorial.
Pal.jpg
The original dimensions of this image are 2048x1536 which are perfect for what we wanna create.

You then wanna open the image into Gimp.

Then scale it down to 600px in width by going to Image/Scale Image (make sure the chain is combined so it'll maintain the images aspect ratio)

Now this is going to be the hovered image, however we wanna scale it down to 400px in width doing exactly the same process we just did.

Now go to Select/ALL (CTRL+A), Edit/Copy (CTRL+C), and Select/None (SHIFT+CTRL+A)
Now undo everything until you get to where the image was scaled at 600px.
Then go to Edit/Paste (CTRL+V) and instead of anchoring the layer go to Layer/New Layer (SHIFT+CTRL+N) and that'll paste it as a new layer.

If it's not already centered grab your alignment tool click on what you just pasted in the document window, and in the tools shelf click these two icons.
icons.png
Now that it's centered go to Image/Autocrop Image and then go to Image/Canvas Size and make sure the chain this time in unchained and multiply the height by 2. (ex my images height is 300px. I would change it to 600px)

Move the magnified image to the bottom of the document and save it (I recommend saving it as a png). (My image I saved as palmagnify.png)

Now make a new folder in your "CSS Magnification" folder called "images" and move the image you just saved into there.

The Magnification:
Now open up a text editor, and put down the normal code you'd use when starting a website.
Code: Select all
<html>
<head>
<title>Name of Website</title>
</head>
<body>
	
</body>
</html>
Now under your title tags add the following code.
Code: Select all
<style type="text/css">
a.pal {
	display:block;
	cursor:default;
	width:400px;
	height:300px;
	background:url('images/palmagnify.png') top left;}
	
a.pal:hover {
	background-position:bottom left;}
</style>
a.pal { -- tells us we gave a link the class pal
display:block; -- tells us that the element is displayed as a block
cursor:default; -- makes the cursor remain at it's default arrow
width:400px; -- the width of our image
height:300px; -- the height divided by two
background:url('images/palmagnify.png') top left;} -- sets the image and states it's being displayed on the top left corner

a.pal:hover { -- tells us this is the where we put the class pal's hover effect
background-position:bottom left;} -- tells us the background image is going to be displayed on the bottom left corner

Now inside our body tags we would add a regular link with the class pal.
Code: Select all
<a href="#" class="pal"></a>
You're now done just save it as "index.html" in your "CSS Magnification" folder and test the new file in your web browser to seethe effect.

The Code:
Code: Select all
<html>
<head>
<title>CSS Magnification</title>
<style type="text/css">
a.pal {
	display:block;
	cursor:default;
	width:400px;
	height:300px;
	background:url('images/palmagnify.png') top left;}
	
a.pal:hover {
	background-position:bottom left;}
</style>
</head>
<body>
	<a href="#" class="pal"></a>
</body>
</html>
I hope you guys enjoyed this tutorial cooll;

The project file is no longer available for download!
You do not have the required permissions to view the files attached to this post.
Last edited by mikethedj4 on Fri Jul 08, 2011 7:28 am, edited 3 times in total.
User avatar
Napster1488
VIP - Donator
VIP - Donator
Posts: 524
Joined: Fri Jan 07, 2011 8:41 pm

Cool!
What does this do ?
Effect like when hover over a Image it goes bigger ? or what ?!
YouTube Downloader v3.0
Image
Image
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Yeah! It zooms in. No animation or anything as this is just CSS to create this effect, but this is should be a good beginner tutorial on image rollovers.
User avatar
Napster1488
VIP - Donator
VIP - Donator
Posts: 524
Joined: Fri Jan 07, 2011 8:41 pm

Ok it can be also done easier with html ;)
As far as i know...
YouTube Downloader v3.0
Image
Image
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

No it can't be done in HTML! HTML is really only used to mark things up, hence the meaning HyperText Markup Language.
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

The Demo page is up so you guys can see it in action, as well as the video tutorial is up as well.
6 posts Page 1 of 1
Return to “Tutorials”