Wed, 2016-12-07 21:25
Greetings
I have recently discovered ImageHover.css from http://www.imagehover.io. A fabulous library.
In trying to understand how this works I looked at css and discover an unexpected form of css
Question: Can someone please interpret for me [class^='imghvr-'] as shown below?
/* * ImageHover.css - <a href="http://www.imagehover.io" rel="nofollow">http://www.imagehover.io</a> * Version 1.0 * Author: CiarĂ¡n Walsh * Made available under a MIT License: * <a href="http://www.opensource.org/licenses/mit-license.php " rel="nofollow">http://www.opensource.org/licenses/mit-license.php </a> */ [class^='imghvr-'], [class*=' imghvr-'] { position: relative; display: inline-block; margin: 0px; max-width: 100%; background-color: #2266a5; color: #fff; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } [class^='imghvr-'] > img, [class*=' imghvr-'] > img { vertical-align: top; max-width: 100%; } [class^='imghvr-'] figcaption, [class*=' imghvr-'] figcaption { background-color: #135796; padding: 30px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffff; } . . . . etc.