Creating a "wave" effect with CSS

Introduction

Many years ago if you want to create a MacOS Dock-like with a bouncing effect for your web page, it was a big challenge and you would need JavaScript to help you to do that. Today, we can achieve that with pure CSS like a piece of cake.

CSS 'transition' and 'flex'

There are two options you can do that but transition is what you basically need:

1. Using transition with the grid system from Zurb Foundation, and a little help from JavaScript or without.
2. Using just transition with flex without anything else.

Option 1

The basic HTML you need:

<div class="row row-scale">
    <div class="grid-container">
        <div class="grid-x grid-padding-x grid-items">

            <div class="large-3 cell cell-item text-center">
                <a href="#">
                    <img src="dist/images/03.png" alt="">
                </a>
            </div>

            <div class="large-3 cell cell-item text-center">
                <a href="#">
                    <img src="dist/images/04.png" alt="">
                </a>
            </div>

            <div class="large-3 cell cell-item text-center">
                <a href="#">
                    <img src="dist/images/05.png" alt="">
                </a>
            </div>

            <div class="large-3 cell cell-item text-center">
                <a href="#">
                    <img src="dist/images/04.png" alt="">
                </a>
            </div>

        </div>
    </div>
</div>

And basically this is what you need to have in your CSS (I use LESS):

.cell-item {
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    transition: width 1s ease;
}

And in your JavaScript, depends on what event you need, either a 'hover' or 'click' event (I use 'click' for my example):

$('.cell-item a').on('click', function(event) {
  event.preventDefault()
  var $this = $(this)
  var parent = $this.closest('.cell')
  var context = $this.closest('.row')

  parent.addClass('large-6 active').removeClass('large-3')
  parent.siblings('.cell').addClass('large-2').removeClass('large-3 large-6 active')
  context.siblings('.row-scale').find('.cell').addClass('large-3').removeClass('large-2 large-6 active')
})

The idea is to swap around large-3, large-6, and large-2. When you need a cell to shrink, you add large-2 and remove large-3. When you need a cell to magnify, you add large-6 and remove large-3. CSS transition will do the rest of job for you.

Option 2

The basic HTML you need:

<div class="row row-flex">
    <div class="grid-container">
        <div class="grid-x grid-padding-x flex-items">

            <div class="flex-item text-center">
                <a href="#">
                    <img src="dist/images/03.png" alt="">
                </a>
            </div>

            <div class="flex-item text-center">
                <a href="#">
                    <img src="dist/images/04.png" alt="">
                </a>
            </div>

            <div class="flex-item text-center">
                <a href="#">
                    <img src="dist/images/05.png" alt="">
                </a>
            </div>

            <div class="flex-item text-center">
                <a href="#">
                    <img src="dist/images/04.png" alt="">
                </a>
            </div>

        </div>
    </div>
</div>

The CSS (LESS) you need:

.flex-items {
    display: flex;
    flex-direction: row;
}

.flex-item {
    -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease;

    -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;

    &:hover {
        -webkit-box-flex: 4;
        -ms-flex-positive: 4;
        flex-grow: 4;
    }
}

You just use flex: 1 to begin with, and swap it with flex-grow: 4 or any number when you need a flex-item to magnify when you hover it. Again, transition will do the rest for you.

Conclusion

There you go, now you have the "wave" effect just as simple as that. You can download or see how it works from my GitHub repository. Let me know what you think. Any improvements or suggestions, just leave me a comment below.