Post Reply 

Pure CSS Image Magnification Effect

Apr 19, 2011, 22:16 (This post was last modified: Apr 19, 2011 23:32 by mikethedj4.)
Post: #1
Pure CSS Image Magnification Effect
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. (If you'd like to use the image I'm using, you can get it on GimpPimp)

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.
[Image: iconsgl.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:
<html>
<head>
<title>Name of Website</title>
</head>
<body>
    
</body>
</html>

Now under your title tags add the following code.
Code:
<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:
<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:
<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, and feel free to download the source file below.

.zip  Pure-CSS-Image-Magnification-Effect.zip (Size: 369.94 KB / Downloads: 338)

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  How to Cut an Image from the Background - The Right Way Wyrlor 9 1,112 Aug 15, 2017 13:16
Last Post: larry316
  Gimp Tutorial: Add Logo to an Image MikeDaviesDMD 4 962 Sep 16, 2014 13:02
Last Post: rich2005
  Image in the grass GUYmp 1 489 May 21, 2014 23:45
Last Post: fluffybunny2
  How To Create a Metallic Text Effect In Gimp Maannuell 0 896 May 25, 2013 21:18
Last Post: Maannuell
  Splitting an Image Mr. Me 0 923 May 12, 2012 15:50
Last Post: Mr. Me

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS