frellproject/mod_window.css at master · gitAlexey/frellproject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
       a {
       color: #96443c;
       text-decoration: none;
       }
                 /*íà÷àëî ñòèëèçàöèÿ òàáëèöû */

                 #EM img { -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;transition: all 0.4s ease;
                padding: 8px;
                background: #ffffff;
                border: 1px solid #d0d0d0;
                -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
                -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
                box-shadow: 0 0 20px rgba(0, 0, 0, .2);
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                                }
                #EM img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);
                background: #ffffff;
                border: 1px solid #1E90FF;
                text-decoration: none;
                text-shadow: none;
                -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
                -webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
                box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
                }
                /*êîíåö ñòèëèçàöèÿ òàáëèöû */

                  /*íà÷àëî óâåëè÷åíèå êàðòèíêè ïî êëèêó */

                      .zoom-images {
                      cursor: zoom-in;
                    }
                    .zoom-images:focus {
                      display: block;
                      position: fixed;
                      z-index: 10;
                      top: 55%;
                      left: 50%;
                      -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
                      -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
                      -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
                      width: auto;
                      height: auto;
                      max-width: 99%;
                      max-height: 88%;
                      pointer-events: none; /*  óáðàòü, åñëè íå íóæíî, ÷òîáû ïðè êëèêå íà óâåëè÷åííîå ôîòî, îíî âîçâðàùàëîñü â èñõîäíîå ñîñòîÿíèå */
                      box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4);
                      cursor: default;
                       opacity: 1;

                    }

                         .zoom-images:focus ~ * {  /* íå èäåàëüíî: òåãè, âûøå ýëåìåíòà îñòàþòñÿ àêòèâíûìè */
                      pointer-events: none;


                        }
            /*êîíåö óâåëè÷åíèå êàðòèíêè ïî êëèêó */

            /*íà÷àëî ïîäïèñü ïîä êàðòèíêàìè */
             .photo {
    display: inline-block; /* Ñòðî÷íî-áëî÷íûé ýëåìåíò */
    position: relative; /* Îòíîñèòåëüíîå ïîçèöèîíèðîâàíèå */
   }
   .photo:hover::after {
    content: attr(data-title); /* Âûâîäèì òåêñò */
    position: absolute; /* Àáñîëþòíîå ïîçèöèîíèðîâàíèå */
    left: 0; right: -5px; bottom: 5px; /* Ïîëîæåíèå ïîäñêàçêè */
    z-index: 1; /* Îòîáðàæàåì ïîäñêàçêó ïîâåðõ äðóãèõ ýëåìåíòîâ */
    background: rgba(0,42,167,0.3); /* Ïîëóïðîçðà÷íûé öâåò ôîíà */
    color: #fff; /* Öâåò òåêñòà */
    text-align: center; /* Âûðàâíèâàíèå òåêñòà ïî öåíòðó */
    font-family: Arial, sans-serif; /* Ãàðíèòóðà øðèôòà */
    font-size: 12px; /* Ðàçìåð òåêñòà ïîäñêàçêè */
    padding: 10px 5px; /* Ïîëÿ */
    border: none; /* Ïàðàìåòðû ðàìêè */
    -o-border-radius: 0 0 5px 5px;
     -moz-border-radius: 0 0 5px 5px;
     -webkit-border-radius: 0 0 5px 5px;
     border-radius: 0 0 5px 5px;
            /*êîíåö ïîäïèñü ïîä êàðòèíêàìè */