Photographs featuring a ripple effect in the columns of Zurb's Foundation framework

Working on a WordPress site using the Foundation 6 CSS framework, I have a design with a row containing two large-6 columns, each filled with an image featuring a wave shape. Check out the image I've linked below.

View the row with 2 columns

I've managed to create the two columns with images inside, but my issue is that I can't seem to get these images to be close enough to each other as shown in the example image.

Take a look at my CodePen here:

<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>

If anyone knows how to achieve this effect, please share your insights!

Thank you, Jerry

Answer №1

To style the image, assign a specific class and apply a negative margin to it.

.styled-image {
  margin-left: -25px;
}

Visit this link for an example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Overlap of Navigation Bar and Carousel

Encountering an issue. I recently made a modification to my website in hopes of integrating a full-width carousel instead of a jumbotron. However, there seems to be a problem as my navbar is overlapping the jumbotron section along with the caption and oth ...

Activate an asynchronous request within a dropdown menu that was loaded using ajax

Let me start by presenting a simplified version of my code: HTML : <form id="add"> <select id="cat"> <option selected value="">…</option> <option value="a">A</option> <option value="b"& ...

Utilizing complex data with Angular 5 [Select+Option] - a comprehensive guide

I have a complex dataset stored in the app.component.ts file that looks like this: export class AppComponentimplements OnInit { tests = { 'name': 'Bob', 'grade': '5th', 'score' ...

The execution of the function halts as soon as the player emerges victorious

In my attempt to create a basic game where players compete to click their designated button faster to reach 100%, I am in need of assistance with implementing a logic that determines the winner once one player reaches or exceeds 100. Essentially, I want ...

Can the placement and dimensions of the audio controls be customized?

I am working on an audio tag that initially hides the controls, and only shows them when a user clicks on a specific link. Here is the code snippet: var audio = document.getElementById(audioId); if (audio.paused) { audio.src = clip; audio.play(); ...

Error in THREE.js: The function material.onBeforeRender is not defined

Can someone assist me with an error I'm encountering while trying to run my code in Three.js? The error message reads as follows: three.js:19528 Uncaught TypeError: material.onBeforeRender is not a function at renderObject (three.js:19528) at ...

Having trouble with named anchor link not functioning in Internet Explorer. I have attempted the recommended fixes from Stack Overflow with no

My issue involves using a named anchor tag: <table id="search_results" name="search_results"> When I try to link to it like this: pagename.php#search_results It works in Firefox and Chrome, but not in IE (8). I have explored using an <a> t ...

Use a CSS rule only if the element is not nested by using the :not selector

Could use some assistance with this coding issue: .element { border: 1px solid red; display: block; } I want to exclude this rule when .element is a descendant of .no-border using the :not pseudo-selector. For example: <div class="element">I ...

"Exploring the vibrant world of colors with Colorbox: a

In one of my projects, I am utilizing colorbox to create a video gallery. One feature I am trying to implement is to display the video description underneath each video when opened in the colorbox modal. Currently, here is what I have: <script> $( ...

Manipulating images live with options for scaling, resizing, and cropping

I am currently developing a content management system that allows users to upload images and attach them to different sections of the pages. My goal is to find a user-friendly, preferably jQuery-based plugin for resizing images before they are cropped. A ...

Is there a way to arrange list items to resemble a stack?

Typically, when floating HTML elements they flow from left to right and wrap to the next line if the container width is exceeded. I'm wondering if there's a way to make them float at the bottom instead. This means the elements would stack upward ...

:selected element malfunctioning

I've been struggling to make the following code work: html <div class = "col-md-4 video text-center wrapper-q1"> <p class = "no-padding"> <input class="question1" id = "vraag1" type="radio" name="q1" value="Moon"> < ...

Ensuring Proper Highlighting for HTML Select Options

I am working on a project involving an HTML Drop-down menu. Check out the code I have so far: http://jsfiddle.net/dineshk/u47xjqLv/ HTML Code <select> <option class="first" style="display:none;">HH</option> <option class= ...

Is it possible for jQuery UI Dialog to function similar to an iFrame?

Is there a way to set up my dialog box with a form so that when the form is submitted, only the dialog box changes instead of the browser location? ...

Looking for assistance with resizing and repositioning an image within a viewport?

The JSFiddle code can be found at this link - https://jsfiddle.net/pmi2018/smewua0k/211/ Javascript $('#rotate').click(function(e) { updateImage(90, 0) console.log("rotation"); }); $('#zoom-in').click(function() { updateImage(0 ...

What is the process for publishing HTML webpages using IIS?

After successfully developing several webpages, I am now ready to deploy them on my localhost. But how exactly can I go about this process? I attempted to create a virtual directory and transferred the HTML pages, CSS, JS, and images into it. Unfortunatel ...

Enhancing the Appearance of Legends in Chartjs

I'm attempting to customize the legend in my Chartjs chart, but I'm facing an issue where I can't seem to change the font color. What I want to achieve is having the font color in white while keeping the individual item colors intact in the ...

The img-fluid class is not properly adjusting the height of the image

I'm currently working with Bootstrap 4 and facing a challenge with creating a grid of 4 images - 2 on top and 2 at the bottom. I've applied the img-fluid class, but the image resizing is based solely on width, leading to the height being too larg ...

What causes a neighboring div to change width when a multi-line span is present?

Here is my React code: <InfoWrapper> <InfoCircle> <span>i</span> </InfoCircle> <span className="info-label"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. elit. </span> </InfoWrap ...

Evolutionary JavaScript Adaptations

I am currently working on an HTML project that involves the use of JavaScript with JQuery. In my project, I will be including a map showcasing different images such as 'Abstract', 'Animals', 'Beach' and more. var images = { & ...