| Image may be NSFW. Clik here to view.  |
| Image hover effect using CSS |
Image hover effects have become an important aspect in web designing as image plays an important role in attracting users intention and hover effects tweak it to make it look appealing. This article describes yet another effect where hovering will display a link or a second image over the initial along with a mask. This effect will be highly useful in case we need visitors to follow a link after being attracted by the image used. To view the demo of this above effect please visit our Image hover effects collection Page.
HOVER EFFECT:
| Image may be NSFW. Clik here to view.  |
| Illsustration of hover effect |
CSS CODE:
|
In the above code ".box" class was used to define the box surrounding the image and properties for it whereas ".link"describes the properties of the link about be displayed over it. In the above code code the link is substituted by means of a image you can either use image of plain link here. If the size of the image is increased you need to alter the position of the link image by properties such as "top" "left" "right".
The class ".mask" defines the properties of mask that needs to be displayed when the image is hovered. Changing the border size will vary the hover effect you obtain as a result and you personally experiment with this to choose your preferred one. You also need to change the border size in case you wish to alter the size of the image used in the effect.
HTML CODE:
|
I hope you like this effect and make sure you experiment with the above codes to get more patterns from this effect. Also check out our Image hover effects collection page for more cool hover effects using simple CSS. Note that some of the effects may not work as expected this was due the template i have used and there is nothing wrong with the code or effect.
Like this article? Share this with others through social sites and don't forget to follow us. Post your comments and queries regarding this article below. Thank you for visiting and Happy coding.
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.
