1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Pure CSS Image Magnification Effect

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, Apr 19, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    Click Here: To see this effect in action!

    [youtube]36aM-h32mAw[/youtube]

    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.
    [​IMG]

    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.
     

    Attached Files:

  2. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,813
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Norway/Norge/Norwegen
    You explain everything thourou... i should fail english... :p
    Noh im tired :p
    You do a great job with the tuts, but you do have a web site so why dont you make example sites ?
    Would let pepole understand more... maybe ?
     
  3. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    What like demo pages?
     
  4. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,813
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Norway/Norge/Norwegen
    Yeah!
    So pepole can see the result before they start the tutorial to see where they are going :)
    Il make one quickly!

    Edit:
    I havent tried this tutorial yet, but now as i see the image i see what you did!
    Clever, but is there a way to do this without having to make the image like you did ?

    <a class="postlink" href="http://maffe811.webs.com/Mike/index.html" onclick="window.open(this.href);return false;">http://maffe811.webs.com/Mike/index.html</a>
     
  5. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    I've thought about demo pages before, but got side tracked with other crap.
    Thanks for reminding me! I'll be up probably later today or tomorrow.

    As for your question, the answer is no.
    You could make two separate images, and instead of using just background-position to position it, you would haft to embed the other image down there just like you did when you gave the class for the first part of the rollover.
     
  6. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,813
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Norway/Norge/Norwegen
    Code:
    a.pal {
       background:url('images/palsmall.png') top left;}
       
    a.pal:hover {
       background:url('images/palbig.png') top left;}
    ?
     
  7. virtualTune

    virtualTune Active Member

    Joined:
    Sep 2, 2009
    Messages:
    4,421
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Neverland
    Home Page:
    I was like "CSS? Finally someone who plays Counter Strike?" then i read the post and i am like "ugh, i hate u mike" ~<3
     
  8. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    Try this instead.

    a.speedimg1 {
    display:block;
    width:***px;
    height:***px;
    background:url('START_IMAGE_URL_HERE') top left; no-repeat;
    overflow:hidden;}

    a.speedimg1:hover {
    width:***px;
    height:***px;
    background:url('HOVERED_IMAGE_URL_HERE') bottom left; no-repeat;}

    lol nope, I'm more for Call of Duty lol
     
  9. virtualTune

    virtualTune Active Member

    Joined:
    Sep 2, 2009
    Messages:
    4,421
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Neverland
    Home Page:
    i am too, but sometimes a more pro game is needed ;D
     

Share This Page