How to realize hovering Picture Library with CSS3
Today, I would like to share with you how to achieve CSS3 hovering picture library of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.
Code
Document
.hovergallery img {
-webkit-transform:scale (0.8); / * Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale (0.8); / * Mozilla scale version*/
-o-transform:scale (0.8); / * Opera scale version*/
-webkit-transition-duration: 0.5s; / * Webkit: Animation duration*/
-moz-transition-duration: 0.5s; / * Mozilla duration version*/
-o-transition-duration: 0.5s; / * Opera duration version*/
Opacity: 0.7; / * initial opacity of images*/
Margin: 0 10px 5px 0; / * margin between images*/
}
.hovergallery img:hover {
-webkit-transform:scale (1.1); / * Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale (1.1); / * Mozilla scale version*/
-o-transform:scale (1.1); / * Opera scale version*/
Box-shadow:0px 0px 30px gray; / * CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; / * Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; / * Mozilla shadow version*/
Opacity: 1
}
These are all the contents of the article "how to hover CSS3 Picture Library". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
