• Locked
No replies
Wed, 2016-12-07 21:25
AceTutor
AceTutor's picture
Offline
newbie
Last seen: 2 years 40 weeks ago
Timezone: GMT+10
Joined: 2016-12-07
Posts: 1
Points: 2

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.

Top
Tags: