PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.86
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.86
51.1.86 51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 All 40 releases
← All changes | includes/widgets/Image_Hotspots/style.css +219 -0 51.1.2 → 51.1.86 View file →
@@ -1,0 +1,219 @@
1 +.king-addons-image-hotspots-container {
2 + position: relative;
3 + width: fit-content;
4 +}
5 +
6 +.king-addons-image-hotspots-items {
7 + position: absolute;
8 + z-index: 10;
9 + top: 0;
10 + left: 0;
11 + width: 100%;
12 + height: 100%;
13 +}
14 +
15 +.king-addons-hotspot-item {
16 + position: absolute;
17 + display: flex;
18 + justify-content: center;
19 +}
20 +
21 +.king-addons-image-hotspots-image {
22 + overflow: hidden;
23 +}
24 +
25 +.king-addons-hotspot-content {
26 + display: flex;
27 + justify-content: center;
28 +}
29 +
30 +.king-addons-hotspot-content i,
31 +.king-addons-hotspot-icon-text {
32 + display: flex;
33 + align-self: center;
34 + flex-flow: column;
35 +}
36 +
37 +.king-addons-hotspot-content i {
38 + text-align: center;
39 +}
40 +
41 +.king-addons-hotspot-icon-text-position-right .king-addons-has-hotspot-icon-text:not(.king-addons-has-hotspot-icon-reverse) {
42 + flex-flow: row-reverse;
43 +}
44 +
45 +.king-addons-hotspot-icon-text-position-left .king-addons-has-hotspot-icon-text.king-addons-has-hotspot-icon-reverse {
46 + flex-flow: row-reverse;
47 +}
48 +
49 +.king-addons-hotspot-tooltip-content:before {
50 + position: absolute;
51 + bottom: -5px;
52 + left: 50%;
53 + width: 0;
54 + height: 0;
55 + content: "";
56 + -ms-transform: translateX(-50%);
57 + transform: translateX(-50%);
58 + border-width: 5px;
59 + border-top-style: solid;
60 + border-top-color: #222222;
61 + border-right-style: solid;
62 + border-right-color: transparent;
63 + border-left-style: solid;
64 + border-left-color: transparent;
65 +}
66 +
67 +.king-addons-hotspot-tooltip-content {
68 + position: absolute;
69 + top: 0;
70 + visibility: hidden;
71 + margin-top: -5px;
72 + transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in, min-width 0.15s ease-in;
73 + opacity: 0;
74 + background-color: transparent;
75 +}
76 +
77 +.king-addons-hotspot-item.king-addons-hotspot-tooltip-always-show .king-addons-hotspot-tooltip-content,
78 +.king-addons-hotspot-item:hover .king-addons-hotspot-tooltip-content {
79 + top: -5px;
80 + visibility: visible;
81 + transform: translate(0%, -100%);
82 + opacity: 1;
83 + background-color: #222222;
84 + z-index: 1;
85 +}
86 +
87 +.king-addons-hotspot-item.king-addons-hotspot-tooltip-always-show .king-addons-hotspot-tooltip-content {
88 + animation: none;
89 + transition: none;
90 +}
91 +
92 +.king-addons-hotspot-animation-simple .king-addons-hotspot-item.king-addons-hotspot-tooltip-always-show .king-addons-hotspot-tooltip-content,
93 +.king-addons-hotspot-animation-simple .king-addons-hotspot-item:hover .king-addons-hotspot-tooltip-content {
94 + animation: king-addons-hotspot-animation-simple 300ms ease-out;
95 +}
96 +
97 +.king-addons-hotspot-animation-shake .king-addons-hotspot-item.king-addons-hotspot-tooltip-always-show .king-addons-hotspot-tooltip-content,
98 +.king-addons-hotspot-animation-shake .king-addons-hotspot-item:hover .king-addons-hotspot-tooltip-content {
99 + animation: king-addons-hotspot-animation-shake 500ms ease-in-out forwards;
100 +}
101 +
102 +.king-addons-hotspot-animation-double-shake .king-addons-hotspot-item.king-addons-hotspot-tooltip-always-show .king-addons-hotspot-tooltip-content,
103 +.king-addons-hotspot-animation-double-shake .king-addons-hotspot-item:hover .king-addons-hotspot-tooltip-content {
104 + animation: king-addons-hotspot-animation-double-shake cubic-bezier(0.36, 0.07, 0.19, 0.97) 1000ms forwards;
105 +}
106 +
107 +.king-addons-hotspot-animation-stretch .king-addons-hotspot-item.king-addons-hotspot-tooltip-always-show .king-addons-hotspot-tooltip-content,
108 +.king-addons-hotspot-animation-stretch .king-addons-hotspot-item:hover .king-addons-hotspot-tooltip-content {
109 + animation: king-addons-hotspot-animation-stretch 1s ease-out;
110 +}
111 +
112 +.king-addons-hotspot-animation-floating .king-addons-hotspot-item.king-addons-hotspot-tooltip-always-show .king-addons-hotspot-tooltip-content,
113 +.king-addons-hotspot-animation-floating .king-addons-hotspot-item:hover .king-addons-hotspot-tooltip-content {
114 + animation: king-addons-hotspot-animation-floating 1s ease-in-out infinite alternate;
115 +}
116 +
117 +@keyframes king-addons-hotspot-animation-simple {
118 + 0% {
119 + transform: translate(0%, -80%);
120 + }
121 + 50% {
122 + transform: translate(0%, -100%);
123 + }
124 + 100% {
125 + transform: translate(0%, -100%);
126 + }
127 +}
128 +
129 +@keyframes king-addons-hotspot-animation-shake {
130 + 0% {
131 + transform: translate(0%, -80%) rotate(2deg);
132 + }
133 + 50% {
134 + transform: translate(0%, -100%) rotate(-3deg);
135 + }
136 + 70% {
137 + transform: translate(0%, -100%) rotate(3deg);
138 + }
139 + 100% {
140 + transform: translate(0%, -100%) rotate(0deg);
141 + }
142 +}
143 +
144 +@keyframes king-addons-hotspot-animation-double-shake {
145 + 0% {
146 + transform: translate(0%, -100%) rotate(0deg);
147 + }
148 + 50% {
149 + transform: translate(0%, -100%) rotate(5deg);
150 + }
151 + 60% {
152 + transform: translate(0%, -100%) rotate(-5deg);
153 + }
154 + 70% {
155 + transform: translate(0%, -100%) rotate(5deg);
156 + }
157 + 80% {
158 + transform: translate(0%, -100%) rotate(-5deg);
159 + }
160 + 100% {
161 + transform: translate(0%, -100%) rotate(0deg);
162 + }
163 +}
164 +
165 +@keyframes king-addons-hotspot-animation-stretch {
166 + 0% {
167 + transform: translate(0%, -0%) scale(1, 1)
168 + }
169 + 10% {
170 + transform: translate(0%, -50%) scale(1.1, .9)
171 + }
172 + 30% {
173 + transform: translate(0%, -100%) scale(.9, 1.1)
174 + }
175 + 50% {
176 + transform: translate(0%, -100%) scale(1.05, .95)
177 + }
178 + 100% {
179 + transform: translate(0%, -100%) scale(1, 1)
180 + }
181 +}
182 +
183 +@keyframes king-addons-hotspot-animation-floating {
184 + 0% {
185 + transform: translate(0%, -100%) translateY(5px);
186 + }
187 +
188 + 100% {
189 + transform: translate(0%, -100%) translateY(0px);
190 + }
191 +}
192 +
193 +.king-addons-hotspot-item-animation-yes .king-addons-hotspot-item:before,
194 +.king-addons-hotspot-item-animation-yes .king-addons-hotspot-item:after {
195 + position: absolute;
196 + z-index: -1;
197 + top: 0;
198 + left: 0;
199 + display: block;
200 + width: 100%;
201 + height: 100%;
202 + content: '';
203 + opacity: 0.6;
204 +}
205 +
206 +.king-addons-hotspot-item-animation-yes .king-addons-hotspot-item:before {
207 + animation: king-addons-hotspot-item-animation 3s ease-out infinite;
208 +}
209 +
210 +.king-addons-hotspot-item-animation-yes .king-addons-hotspot-item:after {
211 + animation: king-addons-hotspot-item-animation 3s 1.5s ease-out infinite;
212 +}
213 +
214 +@keyframes king-addons-hotspot-item-animation {
215 + 100% {
216 + transform: scale(2);
217 + opacity: 0;
218 + }
219 +}