Unknown Coding – newbie quest to tutorials

[Historical Forums User]

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?

Can you provide links to discover more?

Thanks

/*
* ImageHover.css – http://www.imagehover.io
* 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

/
[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.

[Shikkediel]

It’s a substring matching attribute selector:

Blog article

[Paulie_D]

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

[Historical Forums User]

Appreciate your prompt and full answers from both your respective links.

All makes sense now.

You are champions.

Blessings

[Author]

Posts