HoverFX.css (16300B)
1 .contentswap-effect{ 2 display: block; 3 position: relative; 4 overflow: hidden; 5 zoom:1; 6 cursor: pointer; 7 vertical-align: top; 8 } 9 10 11 .contentswap-effect .initial-image{ 12 display: block; 13 } 14 15 .contentswap-effect .overlay{ 16 position: absolute; 17 width: 100%; 18 height: 100%; 19 top:0; 20 left:0; 21 opacity: 0; 22 display:none; 23 margin-top:1px; 24 } 25 26 .contentswap-effect.hover .overlay, 27 .contentswap-effect.caption.hover .overlay, 28 .contentswap-effect:hover .overlay, 29 .contentswap-effect.caption:hover .overlay{ 30 opacity: 1; 31 } 32 33 .contentswap-effect.caption .overlay{ 34 position: relative; 35 width: 100%; 36 height: auto; 37 opacity: 1; 38 } 39 40 41 .contentswap-effect.caption:hover .overlay:after{ 42 content:""; 43 } 44 45 .contentswap-effect.caption.hover .initial-image, 46 .contentswap-effect.caption:hover .initial-image{ 47 opacity: 1; 48 display: block; 49 50 } 51 52 53 .contentswap-effect .swap-inner, .contentswap-effect .swap-inner-caption{ 54 display: none; 55 padding-top:1px; 56 padding-bottom:1px; 57 } 58 59 60 .contentswap-effect .swap-title, 61 .contentswap-effect .swap-subtitle, 62 .contentswap-effect .swap-button{ 63 margin: 20px; 64 text-align: center; 65 } 66 67 68 69 .contentswap-effect.caption .swap-inner{ 70 position:relative; 71 72 } 73 74 .contentswap-effect.contentswap-overlay .overlay:after, .contentswap-effect.caption:hover .swap-inner:after { 75 content:""; 76 } 77 78 .contentswap-effect .swap-title{ 79 margin: 20px 0 20px 0; 80 /*font-weight: 300;*/ 81 text-align: center; 82 } 83 84 .contentswap-effect .swap-button button{ 85 cursor: pointer; 86 background: #605ca8; 87 text-transform: uppercase; 88 padding: 10px 20px; 89 -webkit-border-radius: 3px; 90 -moz-border-radius: 3px; 91 border-radius: 3px; 92 text-decoration: none !important; 93 } 94 95 .contentswap-effect .swap-button button:hover{ 96 background: #403c78; 97 } 98 99 .contentswap-effect .swap-button button.button-2{ 100 background: #327BEF; 101 -webkit-border-radius: 2px; 102 -moz-border-radius: 2px; 103 border-radius: 2px; 104 -webkit-transition: border-color .218s 0; 105 -moz-transition: border-color .218s 0; 106 -o-transition: border-color .218s 0; 107 transition: border-color .218s 0; 108 text-shadow: 1px 0px 0px #1a378e; 109 border-color: #0066cc; 110 border-width: 1px; 111 border-style: solid; 112 113 } 114 .contentswap-effect .swap-button button.button-2:hover{ 115 background: #2D71EE; 116 -webkit-box-shadow: 1px 1px rgba(255, 255, 255, 0.3); 117 -moz-box-shadow: 1px 1px rgba(255, 255, 255, 0.3); 118 box-shadow: 1px 1px rgba(255, 255, 255, 0.3); 119 text-shadow: 1px 1px 0px #001AA6; 120 border-color: #291f93; 121 } 122 123 124 .contentswap-effect .swap-button button.button-4{ 125 background: rgb(182,214,68); 126 -webkit-border-radius: 22px; 127 -moz-border-radius: 22px; 128 border-radius: 18px; 129 border-color: rgb(182,214,68); 130 border-bottom-style: solid; 131 border-right-style: solid; 132 } 133 134 135 .contentswap-effect .swap-button button.button-4:hover{ 136 background: rgb(108,162,60); 137 border-color: #000000; 138 border-width: 0px; 139 border-style: solid; 140 } 141 142 .contentswap-effect .swap-button button.button-6{ 143 background: rgb(159,220,34); 144 -webkit-border-radius: 5px; 145 -moz-border-radius: 5px; 146 border-radius: 5px; 147 text-shadow: 0px -1px 0px #709A16; 148 padding: 10px 20px; 149 border-color: #7BA819; 150 border-width: 1px; 151 border-style: solid; 152 } 153 .contentswap-effect .swap-button button.button-6:hover{ 154 background: rgb(147, 204, 30); 155 -webkit-box-shadow: 0px 1px 0px 0px #A0CA4E inset; 156 -moz-box-shadow: 0px 1px 0px 0px #A0CA4E inset; 157 box-shadow: 0px 1px 0px 0px #A0CA4E inset; 158 text-shadow: 0px -1px 0px #628813; 159 } 160 161 .contentswap-effect .swap-button button.button-9{ 162 border: 2px solid rgba(255, 255, 255, 0.80); 163 background: transparent; 164 -webkit-border-radius: 0; 165 -moz-border-radius: 0; 166 border-radius: 0; 167 } 168 169 .contentswap-effect .swap-button button.button-9:hover{ 170 border-bottom: 10px solid rgba(255, 255, 255, 0.80); 171 } 172 173 .contentswap-effect .swap-button button.button-10{ 174 color: #666666; 175 background: rgb(255,255,255); 176 } 177 178 .contentswap-effect .swap-button button.button-10:hover{ 179 color: #ffffff; 180 background: rgb(69,72,77); 181 } 182 183 184 .contentswap-effect .swap-icons { 185 margin: 0 auto; 186 } 187 .contentswap-effect .swap-icons img{ 188 text-align: center; 189 } 190 191 .contentswap-effect .swap-inner{ 192 position: absolute; 193 top:0; 194 left:0; 195 background: transparent; 196 } 197 198 .clearfix{ 199 clear: both; 200 } 201 202 203 .contentswap-effect .swap-inner{ 204 opacity: 0; 205 } 206 207 .caption.contentswap-effect .swap-inner{ 208 opacity:1; 209 } 210 211 /* ----- Effects ----- */ 212 .contentswap-overlay.effect-1 .swap-inner{ 213 -webkit-transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px); 214 -moz-transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px); 215 -o-transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px); 216 -ms-transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px); 217 transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px); 218 219 } 220 221 .contentswap-overlay.effect-2 .swap-inner{ 222 -webkit-transform: translate(-50%, 0px); 223 -moz-transform: translate(-50%, 0px); 224 -o-transform: translate(-50%, 0px); 225 -ms-transform: translate(-50%, 0px); 226 transform: translate(-50%, 0px); 227 } 228 229 .contentswap-overlay.effect-3 .swap-inner{ 230 -webkit-transform: translate(0px, -50%); 231 -moz-transform: translate(0px, -50%); 232 -o-transform: translate(0px, -50%); 233 -ms-transform: translate(0px, -50%); 234 transform: translate(0px, -50%); 235 } 236 237 .contentswap-overlay.effect-4 .swap-inner{ 238 -webkit-transform: translate(0px, 50%); 239 -moz-transform: translate(0px, 50%); 240 -o-transform: translate(0px, 50%); 241 -ms-transform: translate(0px, 50%); 242 transform: translate(0px, 50%); 243 } 244 245 .contentswap-overlay.effect-5 .swap-inner{ 246 -webkit-transform: translate(50%, 0px); 247 -moz-transform: translate(50%, 0px); 248 -o-transform: translate(50%, 0px); 249 -ms-transform: translate(50%, 0px); 250 transform: translate(50%, 0px); 251 } 252 253 .contentswap-overlay.effect-6 .swap-inner{ 254 -webkit-transform: scale(0.3); 255 -moz-transform: scale(0.3); 256 -o-transform: scale(0.3); 257 -ms-transform: scale(0.3); 258 transform: scale(0.3); 259 } 260 261 .contentswap-overlay.effect-7 .swap-inner{ 262 263 -webkit-transform: scale(1.3); 264 -moz-transform: scale(1.3); 265 -o-transform: scale(1.3); 266 -ms-transform: scale(1.3); 267 transform: scale(1.3); 268 } 269 270 .contentswap-overlay.effect-8 .swap-inner{ 271 -webkit-perspective: 1300px; 272 -moz-perspective: 1300px; 273 perspective: 1300px; 274 -webkit-transform-style: preserve-3d; 275 -moz-transform-style: preserve-3d; 276 transform-style: preserve-3d; 277 -webkit-transform: rotateX(-70deg); 278 -moz-transform: rotateX(-70deg); 279 -ms-transform: rotateX(-70deg); 280 transform: rotateX(-70deg); 281 } 282 283 284 .contentswap-overlay.effect-9 .swap-inner{ 285 -webkit-transform-style: preserve-3d; 286 -moz-transform-style: preserve-3d; 287 transform-style: preserve-3d; 288 -webkit-transform: rotateX(-60deg); 289 -moz-transform: rotateX(-60deg); 290 -ms-transform: rotateX(-60deg); 291 transform: rotateX(-60deg); 292 -webkit-transform-origin: 50% 0; 293 -moz-transform-origin: 50% 0; 294 transform-origin: 50% 0; 295 } 296 297 .contentswap-overlay.effect-10 .swap-inner{ 298 -webkit-transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px); 299 -moz-transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px); 300 -o-transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px); 301 -ms-transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px); 302 transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px); 303 304 } 305 306 .contentswap-overlay.effect-11 .swap-inner{ 307 308 -webkit-transform: scale(0.1); 309 -moz-transform: scale(0.1); 310 -o-transform: scale(0.1); 311 -ms-transform: scale(0.1); 312 transform: scale(0.1); 313 314 } 315 316 .contentswap-overlay.effect-12 .swap-inner{ 317 -webkit-transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6); 318 -moz-transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6); 319 -o-transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6); 320 -ms-transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6); 321 transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6); 322 323 } 324 325 326 .contentswap-overlay.effect-13 .swap-inner{ 327 -webkit-transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px); 328 -moz-transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px); 329 -o-transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px); 330 -ms-transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px); 331 transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px); 332 } 333 334 .contentswap-overlay.effect-14 .swap-inner{ 335 -webkit-transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9); 336 -moz-transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9); 337 -o-transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9); 338 -ms-transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9); 339 transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9); 340 } 341 342 .contentswap-overlay.effect-15 .swap-inner{ 343 -webkit-transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1); 344 -moz-transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1); 345 -o-transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1); 346 -ms-transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1); 347 transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1); 348 } 349 350 .contentswap-overlay.effect-16 .swap-inner{ 351 -webkit-transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1); 352 -moz-transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1); 353 -o-transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1); 354 -ms-transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1); 355 transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1); 356 } 357 358 .contentswap-overlay.effect-17 .swap-inner{ 359 -webkit-transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7); 360 -moz-transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7); 361 -o-transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7); 362 -ms-transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7); 363 transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7); 364 } 365 366 .contentswap-overlay.effect-18 .swap-inner{ 367 -webkit-transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ; 368 -moz-transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ; 369 -o-transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ; 370 -ms-transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ; 371 transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ; 372 } 373 374 .contentswap-overlay.effect-19 .swap-inner{ 375 -webkit-transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7); 376 -moz-transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7); 377 -o-transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7); 378 -ms-transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7); 379 transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7); 380 } 381 382 .contentswap-overlay.effect-20 .swap-inner{ 383 -webkit-transform: perspective(500px) scale(1.6) skew(80deg, 0deg); 384 -moz-transform: perspective(500px) scale(1.6) skew(80deg, 0deg); 385 -o-transform: perspective(500px) scale(1.6) skew(80deg, 0deg); 386 -ms-transform: perspective(500px) scale(1.6) skew(80deg, 0deg); 387 transform: perspective(500px) scale(1.6) skew(80deg, 0deg); 388 389 } 390 391 .contentswap-overlay.effect-21 .swap-inner{ 392 -webkit-transform: perspective(500px) skew(0deg, 80deg); 393 -moz-transform: perspective(500px) skew(0deg, 80deg); 394 -o-transform: perspective(500px) skew(0deg, 80deg); 395 -ms-transform: perspective(500px) skew(0deg, 80deg); 396 transform: perspective(500px) skew(0deg, 80deg); 397 398 } 399 400 401 .contentswap-overlay.effect-22 .swap-inner{ 402 -webkit-transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2); 403 -moz-transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2); 404 -o-transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2); 405 -ms-transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2); 406 transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2); 407 } 408 409 .contentswap-overlay.effect-23 .swap-inner{ 410 -webkit-transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2); 411 -moz-transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2); 412 -o-transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2); 413 -ms-transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2); 414 transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2); 415 } 416 417 .contentswap-effect.hover .swap-inner, .contentswap-effect:hover .swap-inner { 418 opacity: 1; 419 } 420 421 /*Reset*/ 422 .contentswap-overlay.contentswap-effect.hover .swap-inner, 423 .contentswap-overlay.contentswap-effect:hover .swap-inner{ 424 -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg); 425 -moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg); 426 -o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg); 427 -ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg); 428 transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg); 429 } 430