Image hover effects are usually used to increase attraction as well as gaining attention of the visitors towards a certain image. Here is a similar effect in which the details or description of the image will be displayed when the user hovered it with the mouse. These type of hover effects will be very useful for your gallery pages or to display information about a certain place , thing or even a person. The working demo of the this effect was added in the Image hover effects collection page , lets move into the coding part of this hover effect.
CSS CODE:
|
The CSS code of the above effect consists of three elements in it. The first id "picture" is used as a container to assign the size, background size and position of the image used. You can remove the "border-box" is you don't need it and use the plan image for this effect. The second class ".pic_transform" used to assign the transition time and height of the text are over the image. The third class ".text_display" was used to assign the properties of the text to be displayed above the image when hovered. And then it was assigned to be changing their values after the "picture" container is hovered.
HTML CODE:
|
The HTML part of this effect is very simple, all you have to do is place your text in the <div> containers with ideal class and id's used in the CSS code.
Share this article with others through social networks if you like it and don't forget to Post your comments and opinions below. Thank you for visiting us and Happy Coding.
