EduardET

custom cta with custom animation

Jan 31st, 2018
155
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.27 KB | None | 0 0
  1. .wpc-custom-cta-animation {
  2.     transition: .3s ease;
  3.     z-index: 1;
  4. }
  5. .wpc-custom-cta-animation:hover {
  6.     -webkit-transform: scale(1.15);
  7.     -ms-transform: scale(1.15);
  8.     transform: scale(1.15);
  9.     z-index: 2;
  10.     position: relative;
  11. }
  12. .wpc-custom-cta-animation .et_pb_module_header {
  13.     -webkit-transform: translate(0, 1.5em);
  14.     -ms-transform: translate(0, 1.5em);
  15.     transform: translate(0, 1.5em);
  16.     transition: 0.5s ease;
  17. }
  18. .wpc-custom-cta-animation:hover .et_pb_module_header {
  19.     -webkit-transform: translate(0);
  20.     -ms-transform: translate(0);
  21.     transform: translate(0);
  22. }
  23. .wpc-custom-cta-animation .et_pb_promo_description p {
  24.     transition: .5s ease .3s;
  25.     -webkit-transform: translate(-3em, 0);
  26.     -ms-transform: translate(-3em, 0);
  27.     transform: translate(-3em, 0);
  28.     opacity: 0;
  29. }
  30. .wpc-custom-cta-animation:hover .et_pb_promo_description p {
  31.     -webkit-transform: translate(0);
  32.     -ms-transform: translate(0);
  33.     transform: translate(0);
  34.     opacity: 1;
  35. }
  36. .wpc-custom-cta-animation .et_pb_button_wrapper {
  37.     opacity: 0;
  38.     transition: 0.5s ease 0.5s;
  39.     margin: 0px auto;
  40.     -webkit-transform: translate(0, 3em);
  41.     -ms-transform: translate(0, 3em);
  42.     transform: translate(0, 3em);
  43. }
  44. .wpc-custom-cta-animation:hover .et_pb_button_wrapper {
  45.     opacity: 1;
  46.     -webkit-transform: translate(0);
  47.     -ms-transform: translate(0);
  48.     transform: translate(0);
  49. }
Advertisement
Add Comment
Please, Sign In to add comment