Background Properties
A) In HTML, add an img element within the div and specify the image file with the src attribute
B) In CSS, add the background or background-image style to the div element and specify the image file in the url() method
Before and After
Showcase your creative ability with a hover effect image swap.
Learn about human photo manipulations.
Great photo manipulations start with a great photo. Take an original, high resolution, photograph of yourself that will lend itself well to the human photo manipulation that you envision. For those new to photo editing, you may want to follow an online tutorial, of which there are many.
Make a copy of the original image to work from. Do not change the original. Open the copy in a photo editing program and work your magic.
Once you are satisfied with your photo manipulation, save it as a jpg or png file. Keep the high resolution version of the original image and the new photo manipulation. These could come in useful anytime a high resolution image is needed, such as what a printed copy is desired.
Make a copy of each image that will be resized for the web. The width and height of the images should be the same. You may want to use 800px for the width of horizontal (landscape) image, 400px for the width of a square image, or 300px for the height of a vertical (portrait) image.
Create a simple webpage with the web version of your photo manipulation that, when hovered over, switches to the web version of the original image.
Under the image, add a link to any Photo Manipulation tutorials that you followed.