PluginProbe ʕ •ᴥ•ʔ
Interactive Image Map Builder / trunk
Interactive Image Map Builder vtrunk
3.2 trunk 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 3.0 3.1
interactive-image-map-builder / settings / css / template-css.php
interactive-image-map-builder / settings / css Last commit date
template-css.php 2 years ago
template-css.php
586 lines
1 <style>
2 .isimb-6310-tooltip.isimb-6310-template-01 a {
3 text-decoration: none;
4 font-size: 20px;
5 color: #ffeb3b;
6 }
7
8 .isimb-6310-tooltip.isimb-6310-template-01 {
9 position: absolute;
10 display: inline-block;
11 top: 20%;
12 left: 20%;
13 transform: translate3d(0, 0, 0);
14 backface-visibility: hidden;
15 animation-name: shakeMe;
16 animation-duration: 5s;
17 animation-iteration-count: infinite;
18 animation-timing-function: linear;
19 }
20
21 @keyframes shakeMe {
22 2%, 18% {
23 transform: translate3d(-5px, 0, 0);
24 }
25 4%, 16% {
26 transform: translate3d(5px, 0, 0);
27 }
28 6%, 10%, 14% {
29 transform: translate3d(-5px, 0, 0);
30 }
31 8%, 12% {
32 transform: translate3d(5px, 0, 0);
33 }
34 18.1% {
35 transform: translate3d(0px, 0, 0);
36 }
37 }
38
39 .isimb-6310-tooltip.isimb-6310-template-01:hover {
40 animation: unset !important;
41 }
42 .isimb-6310-template-01-hover-content {
43 visibility: hidden;
44 width: 120px;
45 background-color: rgb(255, 255, 255);
46 color: rgb(0, 0, 0);
47 text-align: center;
48 border-radius: 6px;
49 padding: 5px 0;
50 position: absolute;
51 z-index: 1;
52 left: -14px;
53 top: -40px;
54 }
55
56 .isimb-6310-template-01-hover-content::after {
57 content: "";
58 position: absolute;
59 width: 0;
60 height: 0;
61 border-left: 14px solid transparent;
62 border-right: 14px solid transparent;
63 border-top: 14px solid rgb(255, 255, 255);
64 bottom: -10px;
65 left: 47px;
66 }
67
68 .isimb-6310-tooltip.isimb-6310-template-01:hover .isimb-6310-template-01-hover-content {
69 visibility: visible;
70 }
71
72 /* temp 03 */
73
74 .isimb-6310-tooltip.isimb-6310-template-03 {
75 position: absolute;
76 top: 38%;
77 left: 33%;
78 display: flex;
79 justify-content: center;
80 }
81
82 .isimb-6310-tooltip.isimb-6310-template-03 img {
83 position: absolute;
84 width: 50px;
85 height: 50px;
86 border-radius: 50%;
87 display: block;
88 animation: pulse-3 2s infinite;
89 }
90
91 .isimb-6310-tooltip.isimb-6310-template-03 a {
92 position: relative;
93 width: 100%;
94 display: flex;
95 justify-content: center;
96 }
97
98 .isimb-6310-template-03-hover-content::after {
99 content: '';
100 position: absolute;
101 border-left: 8px solid transparent;
102 border-right: 8px solid transparent;
103 border-top: 8px solid #fff8dc;
104 left: 48%;
105 bottom: -8px;
106 }
107
108 .isimb-6310-template-03-hover-content {
109 width: 400px;
110 visibility: hidden;
111 transform: scale(0);
112 transition: .5s;
113 bottom: 20px;
114 position: absolute;
115 z-index: 1;
116 }
117
118 .isimb-6310-tooltip .isimb-6310-template-03 a:hover~.isimb-6310-template-03-hover-content {
119 visibility: visible;
120 transform: scale(1);
121 }
122
123 @-webkit-keyframes pulse-3 {
124 0% {
125 -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.72);
126 }
127 70% {
128 -webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
129 }
130 100% {
131 -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
132 }
133 }
134
135 .isimb-6310-template-03-tooltip-testimonial {
136 padding: 20px;
137 background: cornsilk;
138 }
139
140 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-pic {
141 width: 122px;
142 height: 122px;
143 float: left;
144 margin-right: 50px;
145 position: relative;
146 }
147
148 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-pic:before, .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-pic:after {
149 content: "";
150 display: block;
151 height: 50%;
152 width: 50%;
153 position: absolute;
154 }
155
156 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-pic:before {
157 bottom: -10%;
158 left: -10%;
159 border-bottom: 3px solid #E16B47;
160 border-left: 3px solid #E16B47;
161 }
162
163 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-pic:after {
164 top: -10%;
165 right: -10%;
166 border-top: 3px solid #e16b47;
167 border-right: 3px solid #e16b47;
168 }
169
170 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-pic img {
171 width: 100% !important;
172 height: auto !important;
173 border-radius: 0 !important;
174 animation: unset !important;
175 }
176
177 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-testimonial-content {
178 display: table;
179 position: relative;
180 }
181
182 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-testimonial-title {
183 font-size: 24px;
184 color: #e16b47;
185 text-transform: capitalize;
186 }
187
188 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-post {
189 font-size: 13px;
190 font-weight: 600;
191 color: #585f62;
192 border-left: 1px solid rgba(0, 0, 0, 0.1);
193 margin-left: 5px;
194 padding-left: 5px;
195 }
196
197 .isimb-6310-template-03-tooltip-testimonial .isimb-6310-template-03-tooltip-description {
198 font-size: 13px;
199 color: #7c7c7c;
200 line-height: 22px;
201 }
202
203 /* temp 04 */
204
205 .isimb-6310-tooltip .isimb-6310-template-04 {
206 position: absolute;
207 top: 80%;
208 left: 60%;
209 display: flex;
210 justify-content: center;
211 }
212
213 .isimb-6310-tooltip .isimb-6310-template-04 img {
214 position: absolute;
215 width: 50px;
216 height: 50px;
217 border-radius: 50%;
218 display: block;
219 animation: pulse-3 2s infinite;
220 }
221
222 .isimb-6310-tooltip .isimb-6310-template-04 a {
223 position: relative;
224 width: 100%;
225 display: flex;
226 justify-content: center;
227 }
228
229 .isimb-6310-template-04-tooltip-testimonial::after {
230 content: '';
231 position: absolute;
232 border-left: 8px solid transparent;
233 border-right: 8px solid transparent;
234 border-top: 8px solid #ffffff;
235 left: 47%;
236 bottom: -8px;
237 }
238
239 .isimb-6310-template-04-tooltip-testimonial {
240 width: 400px;
241 background: #ffffff;
242 visibility: hidden;
243 transform: scale(0);
244 transition: .5s;
245 bottom: 0;
246 position: absolute;
247 }
248
249 .isimb-6310-template-04-tooltip-testimonial {
250 display: flex;
251 flex-direction: column;
252 justify-content: center;
253 align-items: center;
254 }
255
256 .isimb-6310-template-04-tooltip-testimonial-content {
257 float: left;
258 text-align: center;
259 justify-content: center;
260 align-items: center;
261 }
262
263 .isimb-6310-template-04-tooltip-pic {
264 width: 100px;
265 height: 100px;
266 border-radius: 50%;
267 margin-top: -50px;
268 overflow: hidden;
269 border: 8px solid rgba(255, 255, 255, 0.15);
270 display: flex;
271 justify-content: center;
272 align-items: center;
273 }
274
275 .isimb-6310-template-04-tooltip-pic img {
276 width: 100% !important;
277 height: auto !important;
278 position: relative !important;
279 }
280
281 .isimb-6310-template-04-tooltip-title {
282 font-size: 25px;
283 font-weight: bold;
284 color: rgb(0, 0, 0);
285 margin: 10px 0 0 0;
286 font-family: sans-serif;
287 }
288
289 .isimb-6310-template-04-tooltip-post {
290 font-size: 16px;
291 color: rgb(108 105 105);
292 }
293
294 .isimb-6310-template-04-tooltip-description {
295 display: inline-block;
296 margin: 10px;
297 padding: 8px;
298 border: 1px solid rgb(0 0 0 / 15%);
299 font-size: 14px;
300 color: rgb(0, 0, 0);
301 position: relative;
302 box-sizing: border-box;
303 font-family: sans-serif;
304 }
305
306 .isimb-6310-template-04-tooltip-description:before {
307 content: "";
308 border: 10px solid transparent;
309 border-right: 10px solid rgba(255, 255, 255, 0.15);
310 position: absolute;
311 top: 20px;
312 left: -21px;
313 }
314
315 .isimb-6310-tooltip .isimb-6310-template-04 a:hover~.isimb-6310-template-04-tooltip-testimonial {
316 visibility: visible;
317 transform: scale(1);
318 }
319
320 @-webkit-keyframes pulse-3 {
321 0% {
322 -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.72);
323 }
324 70% {
325 -webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
326 }
327 100% {
328 -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
329 }
330 }
331
332 /* temp 05 */
333
334 .isimb-6310-tooltip .isimb-6310-template-05 {
335 position: absolute;
336 top: 80%;
337 left: 60%;
338 display: flex;
339 justify-content: center;
340 }
341
342 .isimb-6310-tooltip .isimb-6310-template-05 img {
343 position: absolute;
344 width: 50px;
345 display: block;
346 }
347
348 .isimb-6310-tooltip .isimb-6310-template-05 a {
349 position: relative;
350 width: 100%;
351 display: flex;
352 justify-content: center;
353 }
354
355 .isimb-6310-template-05-hover-content::after {
356 content: '';
357 position: absolute;
358 border-left: 8px solid transparent;
359 border-right: 8px solid transparent;
360 border-top: 8px solid #3e2a41;
361 left: 48%;
362 bottom: -7px;
363 }
364
365 .isimb-6310-template-05-hover-content {
366 width: 400px;
367 background: #3e2a41;
368 visibility: hidden;
369 transform: scale(0);
370 transition: .5s;
371 bottom: 0;
372 position: absolute;
373 z-index: 1;
374 }
375
376 .isimb-6310-template-05-hover-content .isimb-6310-template-05-tooltip-testimonial {
377 margin: 20px 0;
378 display: flex;
379 }
380
381 .isimb-6310-template-05-tooltip-testimonial-content {
382 width: 40%;
383 float: left;
384 justify-content: center;
385 display: flex;
386 flex-direction: column;
387 align-items: center;
388 margin: 8px;
389 }
390
391 .isimb-6310-template-05-tooltip-pic {
392 width: 100px;
393 height: 100px;
394 border-radius: 50%;
395 margin: 0 auto;
396 overflow: hidden;
397 border: 8px solid rgba(255, 255, 255, 0.15);
398 display: flex;
399 justify-content: center;
400 align-items: center;
401 }
402
403 .isimb-6310-template-05-tooltip-pic img {
404 width: 100% !important;
405 height: auto;
406 position: relative !important;
407 }
408
409 .isimb-6310-template-05-tooltip-testimonial-content .isimb-6310-template-05-tooltip-title {
410 font-size: 16px;
411 font-weight: bold;
412 color: #fff;
413 margin: 10px 0 0 0;
414 }
415
416 .isimb-6310-template-05-tooltip-testimonial-content .isimb-6310-template-05-tooltip-post {
417 font-size: 12px;
418 color: #fff;
419 }
420
421 .isimb-6310-template-05-tooltip-description {
422 display: inline-block;
423 padding: 10px;
424 border: 1px solid rgb(255 255 255 / 15%);
425 font-size: 14px;
426 color: white;
427 position: relative;
428 margin: 8px;
429 font-family: sans-serif;
430 line-height: 20px;
431 }
432
433 .isimb-6310-tooltip .isimb-6310-template-05 a:hover~.isimb-6310-template-05-hover-content {
434 visibility: visible;
435 transform: scale(1);
436 }
437 @media only screen and (max-width: 767px) {
438 .isimb-6310-template-05-tooltip-testimonial-content {
439 float: none;
440 width: 100%;
441 margin: 0 0 20px 0;
442 }
443 .isimb-6310-template-05-tooltip-description:before {
444 border: 10px solid transparent;
445 border-bottom: 10px solid rgba(255, 255, 255, 0.15);
446 position: absolute;
447 top: -20px;
448 left: 47.5%;
449 }
450 .isimb-6310-template-05-tooltip-testimonial {
451 flex-direction: column;
452 }
453 .isimb-6310-template-05-hover-content {
454 width: 200px;
455 }
456 }
457
458 /* temp 02 */
459
460 .isimb-6310-tooltip .isimb-6310-template-02 a i {
461 font-size: 35px;
462 color: #ff9800;
463 display: block;
464 width: 50px;
465 height: 50px;
466 border-radius: 50%;
467 cursor: pointer;
468 box-shadow: 0 0 0 rgb(204 169 44 / 40%);
469 animation: pulse 2s infinite;
470 display: flex;
471 justify-content: center;
472 align-items: center;
473 }
474
475 .isimb-6310-tooltip .isimb-6310-template-02-wrapper {
476 position: absolute;
477 bottom: 36%;
478 right: 29%;
479 }
480
481 .isimb-6310-tooltip .isimb-6310-template-02 a {
482 text-decoration: none;
483 font-size: 20px;
484 color: #000000;
485 }
486
487 .isimb-6310-tooltip .isimb-6310-template-02-content {
488 position: absolute;
489 top: 0;
490 background: #ff9800;
491 color: black;
492 border-radius: 5px;
493 padding: 5px;
494 font-size: 20px;
495 }
496
497 .isimb-6310-tooltip .isimb-6310-template-02 {
498 position: absolute;
499 display: inline-block;
500 top: 53%;
501 left: 8%;
502 }
503
504 .isimb-6310-template-02-hover-content {
505 visibility: hidden;
506 background-color: black;
507 color: #fff;
508 text-align: center;
509 border-radius: 6px;
510 padding: 5px 0;
511 position: absolute;
512 z-index: 1;
513 left: 74px;
514 top: -90px;
515 width: 300px;
516 height: 200px;
517 }
518
519 .isimb-6310-template-02-content::after {
520 content: "";
521 position: absolute;
522 border-top: 10px solid transparent;
523 border-bottom: 10px solid transparent;
524 border-right: 10px solid black;
525 left: -10px;
526 top: 50%;
527 z-index: 2;
528 }
529
530 .isimb-6310-template-02-content {
531 display: flex;
532 align-items: center;
533 width: 100%;
534 height: 100%;
535 justify-content: center;
536 }
537
538 .isimb-6310-pos-right-tooltip::after {
539 content: "";
540 position: absolute;
541 width: 0;
542 height: 0;
543 border-top: 10px solid transparent;
544 border-bottom: 10px solid transparent;
545 border-right: 10px solid black;
546 left: -9px;
547 top: 50%;
548 }
549
550 .isimb-6310-tooltip .isimb-6310-template-02:hover .isimb-6310-template-02-hover-content {
551 visibility: visible;
552 }
553
554 @-webkit-keyframes pulse {
555 0% {
556 -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
557 }
558 70% {
559 -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
560 }
561 100% {
562 -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
563 }
564 }
565
566 @keyframes pulse {
567 0% {
568 -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
569 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
570 }
571 70% {
572 -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
573 box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
574 }
575 100% {
576 -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
577 box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
578 }
579 }
580
581 .isimb-6310-template-02-content iframe {
582 height: 75%;
583 width: 100%;
584 position: absolute;
585 }
586 </style>