Transform the X-th image using CSS nth transformation

I am currently working on developing a small game that involves using point icons, with some of them being overlaid on top of each other.

My current approach is the following:

.wormicon:nth-child(2) {
  transform: translateX(-50%);
}

.wormicon:nth-child(3) {
  transform: translateX(-100%);
}

.wormicon:nth-child(4) {
  transform: translateX(-150%);
}

While this method works, I feel like there might be a more elegant solution in pure CSS. Can anyone offer advice on this?

Another issue I am facing is the extra space created by these translations. How can I remove this unnecessary width caused by overlaying the icons? For example, when two images are layered, it adds 50% extra width, and so on.

For reference, here is an image illustrating the problem: https://i.sstatic.net/wN6ec.png

Thank you in advance for any help!

htmlcss

Answer №1

To achieve a visually appealing layout, you can apply margin-left with negative values to the entire group of images.

.container > img {
  margin-left: -10px;
}


.container {
  padding-left: 50px;
}

img {
  position: relative;
  margin-left: -50px;
}
<div class="container">
  <img src="https://image.freepik.com/free-icon/new-york-apple-symbol_318-68820.jpg">
  <img src="https://image.freepik.com/free-icon/new-york-apple-symbol_318-68820.jpg">
  <img src="https://image.freepik.com/free-icon/new-york-apple-symbol_318-68820.jpg">
  <img src="https://image.freepik.com/free-icon/new-york-apple-symbol_318-68820.jpg">
  </div>

Answer №2

Inspired by the Zurfyx style:

.waves {
  margin-left: -10px;
}
.waves:first-of-type {
  margin-left: 0;
}
<div>
  <div class="whatever_class_here">
  <img class="waves" src="http://www.example.com/waves1.svg">
  <img class="waves" src="http://www.example.com/waves2.svg">
  <img class="waves" src="http://www.example.com/waves3.svg">
  <img class="waves" src="http://www.example.com/waves4.svg">
  <div class="whatever_class_here">
</div>

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

Stop the entire page from scrolling when scrolling within a specific div element

I am looking for a solution to prevent the page from scrolling back to the previous section while scrolling within a specific div element. Currently, I am using Alvarotrigo's fullpage scroll plugin, although I am not sure if that is relevant to the is ...

javascriptjqueryhtmlcssscroll

What methods can I use to accomplish the transformation of superimposed images?

Struggling with transforming a content box on my webpage. I have a div containing three overlapping images positioned using Grid, and I want to scale one of them to fill the entire div when scrolled over. While I managed to achieve this effect, I'm un ...

javascripthtmlcssvue.js

Implementing initial state checks for Alpine.js checkboxes based on x-modal is not functioning properly

Upon loading alpinejs, for some reason all checkboxes become unchecked. It's perplexing and I can't figure out why. <div x-data="{ colors: [orange] }"> <input type="checkbox" value="red" x-model="co ...

javascripthtmlarraysformsalpine.js

A guide to personalizing the woocommerce 'best-selling items' widget

WooCommerce widgets are great, but I'm struggling to customize the styling. Can anyone lend a hand? ...

phphtmlcsswordpresselementor

Python's ability to dynamically scrape data

Can someone help me with scraping a simple HTML page using Python? <html> <body> <p>Javascript (dynamic data) test:</p> <p class='jstest' id='yesnojs'>Hello</p> <button onclick="myF ...

pythonhtmlseleniumweb-scraping

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

htmlcss

Automated clicking on a child node element in JavaScript

I have been on a quest to find a reliable method to automate a mouse click on a specific element using JavaScript for a user-script. The element structure is as follows: <div id="elementContainer"> <div class="item1" style="width: 50px; height: ...

javascripthtmlclick

What is the best way to assign unique values to separate sets of radio buttons?

In my application, I have a list of animals with two sets of radio buttons for each animal- one for extinct (y or n) and the other for habitat (land or water). If the user selects "y" for extinct, the habitat radio buttons are disabled. If they select "n" ...

angularjshtml

Eliminating the unwanted line breaks that are automatically inserted when integrating JavaScript with HTML code

Hey everyone, I'm new to web development and could really use some assistance. I am currently working on a website that shows the weather forecast for the next four days, using SimpleWeather.js. In my JavaScript, I want to display the High & Low temp ...

javascripthtmlcsslineline-breaks

When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...

htmlcss

Align buttons to the center within a row using Bootstrap

I am having trouble centering all buttons in each col-md-4: <div class="row position-relative mt-2"> <div class="col-md-4 center-block"> <div class="center-block align-to-bottom"> <div class="btn-group-vertical"> ...

cssbuttonbootstrap-4

Adjusting the sizes of images with varying aspect ratios to perfectly fit within a div without distorting its shape

I'm currently in the process of developing my portfolio website and I am faced with creating a simplistic image browser feature. My goal is to have a container div that adjusts in size according to the browser window, allowing it to house images of va ...

javascripthtmlcss

Instructions on adding a class to every input element within a form using CakePHP

Is there a way to utilize the inputDefaults property in order to apply a consistent class across all input elements within my form? Additionally, could you provide a concise explanation of what exactly the inputDefaults entails? ...

phphtmlcsscakephp

Gatsby causing issues with Material UI v5 server side rendering CSS arrangement

I shared my problem on this GitHub issue too: https://github.com/mui-org/material-ui/issues/25312 Currently, I'm working with the Gatsby example provided in Material UI v5: https://github.com/mui-org/material-ui/tree/next/examples/gatsby After imple ...

javascriptcssreactjsmaterial-ui

Tips for stretching the div#header2 across the full length of div#header1

Code: #header1{width:100%;} #header2{ position: absolute; top: 0px; left: 0px; width: 75px; height: 72px; background: url("./image.png"); background-repeat: repeat-x; background-position: -10px -180px; } <div id="heade ...

htmlcss

Emphasizing a full row within a table is a way to draw attention

I have a piece of HTML/CSS code that successfully underlines the text in a single table cell when hovering over it. However, I want to extend this effect to underline all text in a row of cells, rather than just one cell. It's not necessary for the en ...

htmlcss

The color of the link refuses to change

The link text is displaying in a persistent purple color, despite my attempts to change it to white. I have experimented with adding nav:link and nav:active, but the text reverts to the default color without any CSS styling applied. I have included the fo ...

htmlcss

What is the best way to show navigation when a button is clicked using jQuery?

Currently, I have a page where I include an icon that reveals the menu when the width of the page is equal to or less than 900 pixels. Right now, I simply hide the navigation by setting display:none;, but I am interested in finding out how I can make it ...

jqueryhtmlcss

Enlarging the font size of a specific <a> element dynamically with JavaScript, while ensuring that the padding of surrounding <a> elements remains

I have the following code snippet to display 3 links side by side: <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> <ul id="navigation"> ...

javascripthtmlcss

Search for styling cues within the text and transform them into distinct elements

I was inspired to develop a unique text editor that utilizes cues within the text, such as :strong:, to set formatting rules. Here is the code snippet I have so far: <?php $document = $_GET["document"]; $user = $_GET["user"]; if ($user != n ...

javascriptjqueryhtmlcss