[Tut] Pure CSS Image Magnification Effect
6 posts
Page 1 of 1
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. 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. 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.
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.
The Code:
The project file is no longer available for download!
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. 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. 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
Now under your title tags add the following code.
<html>
<head>
<title>Name of Website</title>
</head>
<body>
</body>
</html>
Code: Select all
a.pal { -- tells us we gave a link the class pal<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>
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
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.<a href="#" class="pal"></a>
The Code:
Code: Select all
I hope you guys enjoyed this tutorial cooll;<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>
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.
Cool!
What does this do ?
Effect like when hover over a Image it goes bigger ? or what ?!
What does this do ?
Effect like when hover over a Image it goes bigger ? or what ?!
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.
Ok it can be also done easier with html ;)
As far as i know...
As far as i know...
No it can't be done in HTML! HTML is really only used to mark things up, hence the meaning HyperText Markup Language.
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
Copyright Information
Copyright © Codenstuff.com 2020 - 2023