How to Add the Ken Burns Effect in Divi

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.4.8″ custom_padding=”0px|||||” transparent_background=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”off” custom_width_px=”1080px” custom_width_percent=”80%”][et_pb_row padding_mobile=”off” column_padding_mobile=”on” admin_label=”Row” _builder_version=”4.4.8″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” max_width=”100%” custom_padding=”0px|||||” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”1080px” custom_width_percent=”80%”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_video src=”https://www.youtube.com/watch?v=snaFinH6d7E” image_src=”https://superfly-storage.s3.us-east-2.amazonaws.com/wp-content/uploads/2016/12/22135125/mountainsBlackAndWhite.jpg” admin_label=”Video” _builder_version=”3.0.47″] [/et_pb_video][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”off” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” max_width=”100%” make_fullwidth=”off” use_custom_width=”off” width_unit=”off” custom_width_px=”1080px” custom_width_percent=”80%”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]The Ken Burns effect is becoming a more and more popular effect on any full-width photo background. The subtlety of the soft zoom in or out of a photo can set your site above and beyond the competition.

Check out the video above to learn how to implement the Ken Burns effect in Divi today! You can also download the free layout, CSS & header code to implement this on your own site. And if you’ve ever wondered why it’s called the “Ken Burns” effect, you can learn more via the Ol’ Trusty Wikipedia.

step 1: watch the video.

Go for it… it’s just 6 minutes. It will save you time in the end since you’ll know how it all works!

step 2: set the CSS class

For this tutorial, we set the fullwidth header section CSS class to: anthemKenBurnsHeaderLinear — However, notice we have several styles available in the code below!

step 3: the trusty ol’ CSS.

Add the snippet of CSS below wherever your CSS is chillin’. You can also download the entire layout at the bottom of this post.

[/et_pb_text][et_pb_toggle title=”gimme that code!” open_toggle_text_color=”#ffffff” closed_toggle_background_color=”#ec008c” admin_label=”Gimme that code!” _builder_version=”4.4.8″ title_text_color=”#ffffff” body_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

  /* ANTHEM HEADER STYLE */
.et_pb_text h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 8px;
    line-height: 1.2em;
    text-transform: uppercase;
}


/* ANTHEM KEN BURNS - LINEAR */
@media only screen and (min-width: 767px) {
	.anthemKenBurnsHeaderLinear .et_parallax_bg {
		animation: kenburns-linear 45s forwards;
	}
}
@media only screen and (min-width: 767px) {
	.anthemKenBurnsSectionLinear .et_parallax_bg {
		animation: kenburns-linear 30s forwards;
	}
}
@keyframes kenburns-linear {
	0% {
		opacity: 0.7;
    -ms-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
		-webkit-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
		transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
		animation-timing-function: linear;
	}
	1% {
		opacity: 1;
	}
	100% {
    -ms-transform: scale3d(1.35, 1.35, 1.35) translate3d(-25px, -55px, 0px);
		-webkit-transform: scale3d(1.35, 1.35, 1.35) translate3d(-25px, -55px, 0px);
		transform: scale3d(1.35, 1.35, 1.35) translate3d(-25px, -55px, 0px);
	}
}

/* ANTHEM KEN BURNS - EASE IN */
@media only screen and (min-width: 981px) {
	.anthemKenBurnsHeaderEaseIn .et_parallax_bg {
		margin-bottom: -60px;
		min-height: calc(100% + 60px);
		animation: kenburns 45s forwards;
	}
}
@media only screen and (min-width: 981px) {
	.anthemKenBurnsSectionEaseIn .et_parallax_bg {
		margin-bottom: -60px;
		min-height: calc(100% + 60px);
		animation: kenburns 30s forwards;
	}
}
@keyframes kenburns {
	0% {
		opacity: 0.7;
		-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(-25px, -60px, 0px);
		-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(-25px, -60px, 0px);
		transform: scale3d(1.1, 1.1, 1.1) translate3d(-25px, -60px, 0px);
		animation-timing-function: ease-in;
	}
	1% {
		opacity: 1;
	}
	100% {
		-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-85px, -55px, 0px);
		-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-85px, -55px, 0px);
		transform: scale3d(1.5, 1.5, 1.5) translate3d(-85px, -55px, 0px);
	}
}

/* ANTHEM SOCIAL MEDIA FOLLOW */
.anthemSocialMedia .anthemSocialMediaFollow li a.icon::before {
  font-size: 36px;
}
.anthemSocialMedia .anthemSocialMediaFollow li {
  margin-bottom: 8px;
  width: 100%;
  text-align: center;
}
.anthemSocialMedia .anthemSocialMediaFollow li a {
  float: none;
  margin-right: 0;
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width : 980px) {
  .anthemSocialMedia .et_pb_column {
      margin-bottom: 40px;
  }
}
@media screen and (max-width : 480px) {
  .anthemSocialMedia .et_pb_row .et_pb_column {
      margin-bottom: 45px !important;
  }
  .anthemSocialMedia .et_pb_row .et_pb_column:last-of-type {
      margin-bottom: 0px !important;
  }
}

/* FADE IN */
.fadein-animated.et-animated {
  opacity: 1;
  -webkit-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  -moz-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  -o-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}

/* FROM BOTTOM */
.bottom-animated.et-animated {
  opacity: 1;
  -webkit-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  -moz-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  -o-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}

/* ANTHEM PARALLAX */
.anthemParallax .et_pb_text h2 {
  font-size: 36px;
}
@media screen and (max-width : 980px) {
  .anthemParallax .et_pb_text h2 {
    font-size: 24px;
  }
}

/* DOWN ARROW ANIMATION */
span.scroll-down.et-pb-icon {
  cursor: pointer;
  height: 60px;
  width: 80px;
  margin: 0px 0 0 -40px;
  line-height: 60px;
  position: absolute;
  left: 50%;
  bottom: 30px;
  color: #FFF;
  text-align: center;
  font-size: 70px;
  z-index: 100;
  text-decoration: none;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
  -webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
  -moz-animation: ca3_fade_move_down 2s ease-in-out infinite;
  animation: ca3_fade_move_down 2s ease-in-out infinite;
}
@-webkit-keyframes ca3_fade_move_down {
  0% {
    -webkit-transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
}
@-moz-keyframes ca3_fade_move_down {
  0% {
    -moz-transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -moz-transform: translate(0, 20px);
    opacity: 0;
  }
}
@keyframes ca3_fade_move_down {
  0% {
    transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 20px);
    opacity: 0;
  }
}

 [/et_pb_toggle][et_pb_text admin_label=”Text” _builder_version=”4.4.8″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

step 4: tweak.

Feel free to play around with changing the CSS class to a few of the other options to find out which style works best for you!

[/et_pb_text][et_pb_button button_url=”https://superfly-storage.s3.us-east-2.amazonaws.com/wp-content/uploads/2016/12/22135125/kenBurnsEffect.zip” url_new_window=”on” button_text=”Download the Free Layout” button_alignment=”center” admin_label=”Button” _builder_version=”3.16″ custom_button=”on” button_text_size=”15px” button_bg_color=”#000000″ button_border_color=”#000000″ button_border_radius=”0″ button_letter_spacing=”0″ button_use_icon=”off” background_layout=”dark” button_border_color_hover=”#ec008c” button_border_radius_hover=”0″ button_letter_spacing_hover=”0″ button_bg_color_hover=”#ec008c” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”on” button_border_color__hover=”#ec008c” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”0″ button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”on” button_letter_spacing__hover=”0″ button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#ec008c” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”] [/et_pb_button][et_pb_button button_url=”https://besuperfly.com/product/anthem-child-theme/” button_text=”Buy the ANTHEM Theme” button_alignment=”center” admin_label=”Button” _builder_version=”3.16″ custom_button=”on” button_text_size=”15px” button_bg_color=”#000000″ button_border_color=”#000000″ button_border_radius=”0″ button_letter_spacing=”0″ button_use_icon=”off” background_layout=”dark” button_border_color_hover=”#ec008c” button_border_radius_hover=”0″ button_letter_spacing_hover=”0″ button_bg_color_hover=”#ec008c” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”on” button_border_color__hover=”#ec008c” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”0″ button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”on” button_letter_spacing__hover=”0″ button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#ec008c” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”] [/et_pb_button][/et_pb_column][/et_pb_row][/et_pb_section]