Layout Preview Fan Out Hover Effect

Layout Preview Fan Out Hover Effect 2

Page Settings Custom CSS

<style><!-- [et_pb_line_break_holder] -->/**transition duration and speed curve**/<!-- [et_pb_line_break_holder] -->.fan-out-images .et_pb_image {<!-- [et_pb_line_break_holder] --> -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);<!-- [et_pb_line_break_holder] --> transition: 300ms all cubic-bezier(.4,0,.2,1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/**Change width and height of image 1 on hover**/<!-- [et_pb_line_break_holder] -->.fan-out-images .et_pb_column:hover .et_pb_image:first-child {<!-- [et_pb_line_break_holder] --> width: 160px;<!-- [et_pb_line_break_holder] --> height: 240px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/**Change width and height of image 2 and 3 on hover**/<!-- [et_pb_line_break_holder] -->.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {<!-- [et_pb_line_break_holder] --> width: 160px;<!-- [et_pb_line_break_holder] --> height: 220px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/**Rotate image 2 counterclockwise and move to the left on hover**/<!-- [et_pb_line_break_holder] -->.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> -webkit-transform: rotate(-5deg);<!-- [et_pb_line_break_holder] --> transform: rotate(-5deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/**Rotate image 3 clockwise and move to the right on hover**/<!-- [et_pb_line_break_holder] -->.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {<!-- [et_pb_line_break_holder] --> right: 0;<!-- [et_pb_line_break_holder] --> -webkit-transform: rotate(5deg);<!-- [et_pb_line_break_holder] --> transform: rotate(5deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*******************<!-- [et_pb_line_break_holder] -->CSS for Separate Transform Hover Effect on Image 1 and 2. Make sure the row has the CSS Class fan-out-images2 for this to work<!-- [et_pb_line_break_holder] -->*********************/<!-- [et_pb_line_break_holder] -->/**transition duration and speed curve**/<!-- [et_pb_line_break_holder] -->.fan-out-images2 .et_pb_image {<!-- [et_pb_line_break_holder] --> -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);<!-- [et_pb_line_break_holder] --> transition: 300ms all cubic-bezier(.4,0,.2,1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/**Change width and height of image 1 on hover**/<!-- [et_pb_line_break_holder] -->.fan-out-images2 .et_pb_column:hover .et_pb_image:first-child {<!-- [et_pb_line_break_holder] --> width: 160px;<!-- [et_pb_line_break_holder] --> height: 240px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/**Change width and height of image 2 and 3 on hover**/<!-- [et_pb_line_break_holder] -->.fan-out-images2 .et_pb_column:hover .et_pb_image:nth-child(2), .fan-out-images2 .et_pb_column:hover .et_pb_image:nth-child(3) {<!-- [et_pb_line_break_holder] --> width: 160px;<!-- [et_pb_line_break_holder] --> height: 220px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/**Rotate image 2 counterclockwise and move to the left on hover**/<!-- [et_pb_line_break_holder] -->.fan-out-images2 .et_pb_column:hover .et_pb_image:nth-child(2) {<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/**Rotate image 3 clockwise and move to the right on hover**/<!-- [et_pb_line_break_holder] -->.fan-out-images2 .et_pb_column:hover .et_pb_image:nth-child(3) {<!-- [et_pb_line_break_holder] --> right: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>