For a WordPress website I’m working with the CSS framework Foundation 6.
The design has a row that contains 2 large-6 columns. Each column is filled with an image. However these images have a wave shape on the inside. See the image I attached.

The row with 2 columns

Now I’ve created 2 columns with images inside, but my problem is I can’t get those 2 images to “touch” each other as in the image I’ve shared.
See pen: https://codepen.io/Jerryschouwink/pen/MmVeQL

<div class="row expanded collapse">
  <div class="large-6 columns">
    <img src="http://projecten.webinc.nl/pen/img-left.png">
  </div>
  <div class="large-6 columns">
    <img src="http://projecten.webinc.nl/pen/img-right.png">
  </div>
</div>

Is there someone who can tell me how to do this?

Thanks,
Jerry

Read more here: Images with a wave in Zurb’s Foundation columns


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: