What is the best way to place multiple images on top of one another within a single div, and make them break apart with animation upon hovering?

HTML:

<div class="mySlides">
    <img src="1.jpg">
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>
    <img src="5.jpg"/>
</div>

CSS:

.mySlides {
    padding-top: 25%;
    padding-left: 5%;
}
.mySlides img {
    object-fit: cover;
    position: absolute;
    max-width: 35%;
}


.mySlides img:nth-of-type(1) {
    left: 0%;
    top: 0%;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}

The above styling will apply to all images with nth-of-type(2,3,4,5).

.mySlides img {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    padding: 10px 10px 30px 10px;
    background: linear-gradient(#ffffff, #eaeaea);
    border: solid 1px black;
}

I intended for the images to be stacked on top of each other and centered on the screen. Upon hovering over them, they should separate horizontally while retaining the animation effect.

Answer №1

Take a look at this

Here is a functional fiddler example: https://jsfiddle.net/RaajNadar/L0ennqwp/

Code Snippet for HTML:

<div class="mySlides">
    <img src="http://lorempixel.com/400/200/">
    <img src="http://lorempixel.com/400/200/sports"/>
</div>

CSS Styles:

.mySlides {
  position: relative;
}

.mySlides img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 300px;
  transition: left 1.2s ease-in-out;
}

.mySlides:hover img:last-child {
  left: 300px;
}

This also includes a smooth animation effect.

Answer №2

Do you find this helpful?

.slideshow {
  display: flex;
  position: relative;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
}

.slideshow:hover img {
  position: relative;
  top: auto;
  left: auto;
}
<div class="slideshow">
  <img src="http://placehold.it/300x150/000000">
  <img src="http://placehold.it/300x150/003300" />
  <img src="http://placehold.it/300x150/00ff00" />
  <img src="http://placehold.it/300x150/006600" />
  <img src="http://placehold.it/300x150/ff0000" />
</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

How should one correctly align various classes in a cascading manner within CSS?

Here is an interesting challenge - I want each of these buttons to have their background image change when hovered over. However, I'm struggling with the class setup in my code. I've been trying to understand how to distinguish between divs and c ...

JavaScript is failing to pass the argument value

Whenever I attempt to pass a value on an onclick=function('') function, the value does not seem to get passed correctly while ($row = mysqli_fetch_array($result)) { $id = $row['id']; echo '<a href="#" onclick="DeleteUse ...

Doesn't seem like jQuery's .blur() is responsive on dynamically created fields

I am currently designing a login form that includes a registration form as well. Using jQuery, the email field is generated dynamically. The labels are positioned below the fields so that they can be placed inside the field. As the field gains focus or ha ...

The code for the submit button functions properly in Firefox, but encounters issues in Internet Explorer

While this code functions correctly in Firefox, it fails to work in IE8. <a class="sub"> <input type="submit" a="" none;<="" display:=""> </a> Although the button appears on the page, it is not clickable in IE8. Can you help explain ...

Using CSS to overlay a background image on top of a background gradient

Struggling to get both a background gradient and a background image (transparent PNG) to display in my div. No matter what, only the color gradient shows up while the image remains hidden. If I use a solid color instead of a gradient, the image displays ju ...

"Utilizing Bootstrap to ensure content is aligned perfectly to the baseline

I've been struggling to align my contents to the baseline while working with the bootstrap framework. I tried following the instructions in the documentation, but it didn't work out as expected. <div class="row"> <div class="col-12 ...

AJAX code fetching dynamic content without relying on file loading

When I load my program, the dynamic code does not appear on the page until I reload it again. I attempted to use the onload event in the body to load content from an XML file using AJAX, but it only works after closing and reopening the program, not dynam ...

What is the best method for fetching data from PHP to display on my Angular page?

I am struggling to retrieve data from MySQL to display on my AngularJS page, using PHP as my server-side language. I can fetch the data from my PHP file but unable to render it on my page. If you have any alternative solutions, please let me know. Below i ...

Ways to restrict a function to a single DOM element using either its id or class

This script is responsible for dynamically loading pages on my website. It works fine, except that it currently iterates over all anchor tags a on the site, whereas I want it to iterate only through my navigation menu. Here is the navigation menu: <div ...

Using Jquery to switch between different CSS styles

I'm currently working with a jQuery code that is functioning properly. $(window).load(function() { $('.menuBtn').click(function(e) { e.preventDefault(); (this.classList.contains('is-active') === true) ? this.c ...

Utilizing jQuery to pinpoint the exact position within a Flexbox container

I have a unique setup with multiple boxes arranged using Flexbox as the container and list tags as individual boxes inside. These boxes are responsive and change position as the width is resized. My goal is to use jQuery to detect which boxes are touching ...

Inserting a line break in real-time within a JSX statement

Currently working on a React application that retrieves song lyrics from an API. The API provides me with a lyrics_body attribute as a string, which I use to showcase the lyrics on the webpage. However, when React renders it, the format is not ideal becau ...

Keeping datetimepicker current when a date is chosen - a guide

I am currently utilizing the datetimepicker plugin from xdsoft to enable users to select a booking date and time. Check out the documentation for more details. To manage bookings, I have set up a 'fechas' table in my database which stores inform ...

Is it possible to dynamically update the iframe source based on the current URL?

I have come across an iframe containing different pages, for example: <iframe src="..."></iframe> on site.com/page1 and site.com/page2. Is it possible to change the iframe src based on the URL? If so, how can this be achieved? Any assistance wo ...

Modify the :after property of an element using jQuery

Is there a different approach I can take to achieve this desired outcome? Currently, the code snippet below is not yielding the expected results. $('.child_flyout:after').css({'top':'20px'}); Are there any alternative method ...

Tips for applying a CSS wrapper to an element, not just text

I am working with a group of span elements within a td that has a set width. My goal is to wrap the span elements onto new lines without breaking up the text inside them. For example, if I have: <td> <span>bind</span> <span&g ...

Send an identifier to the following page upon selecting a hyperlink in AngularJS

I am currently working on a project that involves displaying a list of places and allowing users to click on a place to view more details on another page. I would like some guidance on how to implement this feature. Here is the HTML code for Page1: <l ...

Issue with the execution of Javascript code. Edit required

After creating a registration form that allows users to input their information for registration, I encountered an issue where if certain fields were left empty or if the user name was unavailable or the email address was already registered, a warning mess ...

Having trouble customizing the appearance of wtform attributes

Hello Everyone, Here is the content of the .py file: from flask import Flask, render_template, flash, session, redirect, url_for from flask_wtf import FlaskForm from wtforms import StringField,SubmitField from wtforms.validators import Da ...

Initiating an audio call exclusively via SimpleWebRTC

I'm currently utilizing a jQuery plugin for WebRTC found here. My goal is to initiate an audio call only, but I am struggling to find a function within the plugin that allows for this. The code snippet I am using with autoRequestMedia set to false is ...