-.gallery figure[data-sup]:after {
- position: absolute;
- right: 0;
- content: attr(data-sup);
- color: #FFF;
- background: #0006;
- border-radius: 1em;
- padding: .1ex .4em;
- margin: .4em;
-}
-.gallery .expand > figure[data-sup]:after {
- content: '+' attr(data-sup);
- background: #0008;
- font-size: 150%;
- border: 2px solid #FFF8;
+ figure, figcaption {
+ transition: all .5s ease-in;
+ }
+ figure:hover ~ ul figcaption {
+ /* mark all children */
+ color: #FFF;
+ background: rgba(0, 0, 0, .5);
+ }
+
+ $oversup: 'figure[data-sup]:after'; // select parent overlays
+ #{$oversup} {
+ position: absolute;
+ right: 0;
+ content: attr(data-sup);
+ color: #FFF;
+ background: #0006;
+ border-radius: 1em;
+ padding: .1ex .4em;
+ margin: .4em;
+ }
+ .expand > #{$oversup} {
+ content: '+' attr(data-sup);
+ background: #0008;
+ font-size: 150%;
+ border: 2px solid #FFF8;
+ }