Ok, so you don’t know much about jQuery, and are already thinking ‘Here we go again, another jQuery tutorial I’m going to get lost in’. Well, do not worry my friends, if there was a jQuery donkey kingdom, I wouldn’t be too far from the throne, as my jQuery experience is as extended as it can get after following the most basic and dummy-proof technical sessions the web can hold.
So here we go, let’s get cracking.
I was thinking it would be nice (as stated in my previous tutorial: Create a more human-friendly ‘About’ page to convert more leads) to present one fictional employee/collaborator and his/her professional and personal details, while giving the reader a nice zooming effect when hovering over the employee’s featured picture.
As you can see, it’s a simple white-background head-to-toe (original size of 902px by 1500 px) picture of a young woman named Laura. Anybody can do the same with their friends/collaborators/staff. It wouldn’t take very long to get the same result with Photoshop and a bit of time spent on your computer.
I won’t be going much over the CSS structure I have been using for this practical example, as 1. There isn’t much to look at and 2. I won’t be teaching you CSS experts anything.
Just a couple of things I may highlight is the use of both round corners and box shadow for my main (and only) box thanks to the notoriously-known moz/webkit border+box shadow effects, and a cross-browser opacity setting for the initial picture stage.
The CSS in detail
On the container
CORNERS
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-right-radius : 20px;
-webkit-border-bottom-right-radius: 20px;
SHADOWS
-moz-box-shadow:1px 1px 12px #000;
-webkit-box-shadow:1px 1px 12px #000;
box-shadow:1px 1px 12px #000;
On the pic for the opacity settings
OPACITY
opacity: 0.5;
-moz-opacity: 0.5;
filter:progid:DXImage
Transform.Microsoft.Alpha(opacity=50);
jQuery code
As I previously mentioned it, I know very little about jQuery , but as even an idiot like me does understand those few lines of script, i’m not worrying about your comprehension here.
We are here working on a hover function ($(‘#pic img’).hover) of any image present in the div of id #pic.
The image will be placed in its initial stage (small picture of height 350px and of 50% clear with the opacity=0.5 criteria) as stated in the CSS file and will then behave according to the two .animate functions which will take the picture to a clear (opacity=1.0) and zoomed up position (height=1500px) and back.
Note that you will be needing an overflow:hidden; line for the div containing the picture, to prevent the zoomed up picture to expand further than the div’s limits.
How simple is that? Yet I believe it is very effective in terms of presentation.
So you know what you have to do. Gather your staff, take a nice head-to-toe picture of tem, if possible in their favorite hobby gear (unless you’re running a law firm!!), ask them to give you a few details of their own lives, and let’s spice up those ‘About’ pages…
Demo and Download files
My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.
Follow @shoogledesigns
