Search code examples
csspseudo-class

CSS - ::after pseudo element positioning and dimension issue


I have 2 images with transparent background and need to put one on top of each other with the same positioning:

  • 1 spinning (underneath)
  • 1 fixed (above)

I need to have the whole image composition to be centered and to have its size adjusted depending on the window size.

I used an ::after pseudo element for the fixed one but couldn’t get its position and size to follow the spinning one.

I suppose the background-size property should be involved but didn’t manage to use it properly.

Would appreciate any advice, even if it involves going with a totally different approach than the ::after pseudo class.

Many thanks.

body{
			width: 100%;
			height: 100%;
			background-color: #000;
			text-align: center;
			color: #fff;
		}
		.main-container{
			background-color: #00f;
			width: 50%;
			margin: 0 auto;
		}
		.engine-container{
		}
		.engine-complete{
			position: relative;
			width: 100%;
			height: auto;
			margin: 0 auto;	
		}
		.engine-complete::after{
			content: ""; 
			position: absolute;
			width: 191px;
			height: 192px;
			top: 1px;
			left: 0;
			background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png); 
		}
		.engine-rotating{
			width: 50%;
			height: auto;			
		}
		.spin {
		  animation-duration: 15s;
		  animation-name: spin;
		  animation-iteration-count: infinite;
		  animation-timing-function:linear;
		  animation-play-state: running;
		}
		@keyframes spin {
		  from {
		    transform:rotate(360deg);
		  }

		  to {
		     transform:rotate(0deg);
		  }
		}
<div class="main-container">
		<h1>spinning engine</h1>
		<div class="engine-container">
			<div class="engine-complete">
				<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>  
			</div>
		</div>
	</div>


Solution

  • Something like this?

    EDIT: Instead of setting the image as a background using the ::after pseudo-class, I added the fixed image into the html. I also eliminated one of your containers.

    I centred the animated image using text-align:center and centred the fixed image using position: absolute

    I set both images to 30% width relative their parent .engine-container

    The fixed image has a higher z-index than the animated image so that it always appears over it. The images also change size accordingly, relative to window size.

    body {
      width: 100%;
      height: 100%;
      background-color: #000;
      text-align: center;
      color: #fff;
    }
    
    .main-container {
      background-color: #00f;
      width: 50%;
      margin: 0 auto;
    }
    
    .engine-container {
      text-align: center;
      position: relative;
    }
    
    .engine-rotating,
    .engine-fixed {
      width: 30%;
    }
    
    .engine-fixed {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      z-index: 5000;
    }
    
    .spin {
      animation-duration: 15s;
      animation-name: spin;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-play-state: running;
    }
    
    @keyframes spin {
      from {
        transform: rotate(360deg);
      }
      to {
        transform: rotate(0deg);
      }
    }
    <div class="main-container">
      <h1>spinning engine</h1>
      <div class="engine-container">
        <img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
        <img src="https://image.ibb.co/jOqNma/engine1_crpd.png" class="engine-fixed" alt="">
      </div>
    </div>

    UPDATE Heres what I came up with:

    A similar effect using ::after. I was able to achieve this by inserting the image url into the content: rule, rather than setting a background image.

    body {
      width: 100%;
      height: 100%;
      background-color: #000;
      text-align: center;
      color: #fff;
    }
    
    .main-container {
      background-color: #00f;
      width: 50%;
      margin: 0 auto;
    }
    
    .engine-container{
      text-align: center;
      position: relative;
    
    }
    
    .engine-rotating{
    }
    
    .engine-container::after{
      content: url('https://image.ibb.co/jOqNma/engine1_crpd.png');
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      z-index: 5000;
    }
    
    .spin{
      animation-duration: 15s;
      animation-name: spin;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-play-state: running;
    }
    
    @keyframes spin{
      from {
        transform: rotate(360deg);
      }
      to {
        transform: rotate(0deg);
      }
    }
    <div class="main-container">
      <h1>spinning engine</h1>
      <div class="engine-container">
        <img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
      </div>
    </div>