Image hover effects have been quite interesting to work and moreover it enhances the beauty of websites when added at right places. You might have come across many types of Image hover effects created using simple HTML and CSS codes. You are about to see some similar kind of simple image hover effect using CSS here. The main concept behind this effect is we are going to place a background image which will be hidden by the image placed above it. When hovered the image in the above slides to reveal the background image. Sounds familiar, yeah all hover effects are connected well implementing methods usually differ. I have written many articles about image hover effects in this site before don't forget it in our HTML/CSS codes page.
AFTER HOVERING:
The above image illustrates the the sliding hover effect, how it reveals the image underneath creating a sliding effect. This hover effect works well with photo galleries and photography sites. The demo of this effect was added in this Demo effects page. Kindly consider that some of the effects in that page may not work due to blogger template, but i will assure it will work fine when you implement it separately. Lets move into the coding part of this effect.
CSS CODE:
|
In the above code i have added a background image and assigned size for it in order to match the image above it. The key element of this hover effect lies in line 18 as i increase the left margin by 430 pixels to reveal the background image. and some transitions to make this effect look cooler. And when the mouse is out from the image it returns back to its normal position. This element while moving may disturb other elements in the page so implementation should be done carefully.
HTML CODE:
|
HTML part was very easy all you need to do is put your cover image in a <div> container with Class=" slide image". This applies all the properties of the classes "slide" and "image" to your picture. Replace the Image URL's and you are done now enjoy this effect and carefully implement it.
Share this article if you love it and don't forget to check our HTML/CSS page for lots of cooler effects. Post your comments and queries regarding this article, thank you for visiting and keep up the good work.
