PluginProbe ʕ •ᴥ•ʔ
Interactive Image Map Builder / 3.0
Interactive Image Map Builder v3.0
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>