CSS gallery slideshow with images that smoothly fade-in and fade-out at a specified location

In the image below, at position 4 (marked by yellow circle) from the left where picture 6 is displayed, I want a cross-fade (fade-in/fade-out) gallery of images to take place.

Specifically at position 4, I am looking for a cross-fade (fade-in/fade-out) effect between Picture 4, Picture 5, and Picture 6.

https://i.sstatic.net/cHLTF.png

https://jsfiddle.net/k0vzthne/embedded/result

I have implemented CSS codes in my project but currently not witnessing the desired cross-fade effect at position 4. Here are the relevant CSS snippets:

.featured-block a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
  position: absolute;
  right: 568px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  opacity: 0;
}

.featured-block a:nth-of-type(4) {
  animation-delay: 0s;
}

.featured-block a:nth-of-type(5) {
  animation-delay: 4s;
}


.featured-block a:nth-of-type(6) {
  animation-delay: 8s;
}

@keyframes cf4FadeInOut {
    0% {opacity: 0;}
    20% {opacity: 1;z-index: 999;}
    33% {opacity: 1;}
    53% {opacity: 0;z-index: 1;}
    100% {opacity: 0;}
}

Issue at Hand:

I am seeking advice on what modifications should be made in the fiddle so that the desired fade-in/fade-out effect can occur with the 3 specified images at position 4.

htmlcsscss-animationsfadeinfadeout

Answer №1

When using display: flex on a container with absolutely positioned children, there can be some issues, as detailed here.

Considering that, here is the code snippet:

.featured-block {width: 1000px;}
.featured-block a { display: inline-block; opacity: 1;}

a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) { 
  position: absolute; 
  animation: 12s infinite ease-in-out cf4FadeInOut;
  opacity: 0;
  z-index:1;
}

.featured-block a:nth-of-type(4) { animation-delay: 0s; }
.featured-block a:nth-of-type(5) { animation-delay: 4s; }
.featured-block a:nth-of-type(6) { animation-delay: 8s; }

@keyframes cf4FadeInOut {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
<div class="featured-block">
  
  <a href="https://www.google.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%201" data-fallback-img="https://via.placeholder.com/200x100?text=picture%201" alt="Outburst">
      </figure>
    </div>
  </a>
  
  <a href="https://www.facebook.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%202" data-fallback-img="https://via.placeholder.com/200x100?text=picture%202" 
alt="L'Essentiel with Esther Bégin">
      </figure>
    </div>
  </a>
  
  <!-- More anchor tags with placeholders -->

</div>

Answer №2

To make the animation work, you must specify the name of the animation: 

.featured-block a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
  position: absolute;
  right: 568px;
  animation: 12s infinite ease-in-out cf4FadeInOut;
  opacity: 0;
}

Check it out here

Edit:

If you are facing display order issues, using negative animation delay can help:

.featured-block a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
  position: absolute;
  right: 568px;
  animation: 12s infinite ease-in-out cf4FadeInOut;
  opacity:0;
}

.featured-block a:nth-of-type(4) {
  animation-delay: -4s;
}

.featured-block a:nth-of-type(5) {
  animation-delay: 0s;
}

.featured-block a:nth-of-type(6) {
  animation-delay: 4s;
}

@keyframes cf4FadeInOut {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

Take a peek here

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

Adding text after a div in React-JS using Bootstrap: A quick guide

Just starting out with website development and I have a question. As I practice making this website, I am struggling to figure out how to add the text "To know more about us click here" below the 'Get started' button. I tried adding a simple < ...

javascripthtmlcssreactjsbootstrap-4

When you click on the input field, a file manager window will open. You can then select a file and the URL of the selected file will be automatically added to the

I need assistance with customizing the code to open the flmngr window and add the URL of the selected file to the input field when onclick. window.onFlmngrAndImgPenLoaded = function() { var elBtn = document.getElementById("btn"); // Style bu ...

javascripthtmljquery

IE browser transparency effect on canvas

I have encountered an issue when drawing a shape on canvas using kineticJS and setting the fill to none. The code snippet I am using is below: var rect = new Kinetic.Path({ x: 0, y: 0, data: 'm 2.0012417,2.0057235 ...

javascripthtmlcanvastransparencykineticjs

Receive the outcome once the form is submitted

Can someone provide quick assistance? I am looking to allow users to upload a CSV file for me to parse and analyze. Once the processing is done, I need to display the results back to the users. While uploading the file, I also need to ensure that the file ...

javascriptjavajqueryhtmljsp

Managing and keeping track of a universal value within the success callback function among numerous Ajax POST requests

I am faced with a challenge involving two HTML elements: 1). a div element that functions as a multiple select, created automatically by a predefined widget, and 2). a button that triggers an onclick event. On the JavaScript side, I have a global variable ...

javascripthtmljqueryajax

Having trouble implementing a nested grid system in Bootstrap

Struggling with creating a grid layout that looks like the one in this image. I initially thought of setting up a row with 2 divided columns, then adding another row+column within each of those 2 columns to place a card inside. This is an excerpt of my c ...

htmlcssgridbootstrap-5

When an if statement is triggered by an overload of information, it initiates the start of a fresh

I am in need of creating an if statement that will trigger whenever images with IDs 0 to 3 (a total of 4 images) are loaded. This if statement should then generate a new row containing 0 to 3 images, and the same logic needs to be applied for words as well ...

javascripthtmljsonif-statementbootstrap-modal

Deactivate one select box depending on the value chosen in another select box

I am looking to disable one select box when the other select box equals 1, and vice versa. While I know how to achieve this with IDs, the challenge arises as the select boxes I want to target have dynamically generated IDs and names via PHP. Therefore, I n ...

javascriptjqueryhtml

PHP HTML failing to recognize "mandatory" attributes

I'm facing an issue with adding validation for an empty field. When the field is left empty, the form should not be submitted. However, the "required" attributes seem to be ineffective in achieving this. Birthdate: <select name="month" r ...

phphtml

Exploring the ways to retrieve the returned Dynamic scope in AngularJS

There's a specific need I have - I require a single AngularJS function that can dynamically return the scope variable based on an input parameter. When it comes to controller functions, I've come across examples of how to achieve this dynamic sco ...

htmlangularjsdynamic-scope

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

Receiving partial data through the API

My PHP API seems to be experiencing issues when I send data to it using either a post or get request. The strange thing is that the API receives only half of the data. This API functions perfectly fine on localhost, but encounters errors when used on the p ...

javascriptphphtmlapi

Problem encountered when attempting to insert a new division into an existing flexbox container

I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...

htmlcssflexbox

Positioning two divs to the right of another div

I am facing an issue with aligning the menu and categories divs to the right of the logo div in the following example: jsfiddle. I want them to remain stacked one under another as they are currently, but I am unable to achieve the desired display. Any ass ...

css

Executing a PHP function within the same file using AJAX: A step-by-step guide

I've been exploring online tutorials to learn about ajax as it's a new technology for me. My main goal is to understand how to utilize two functions, create() and population(), in a php file. The create() function generates a form like this: ma ...

javascriptphphtmlajax

Ways to stop click propagation in the case of a parent anchor link containing a button among its children

Every time I click on the Link parent, it triggers a click event on the button as well. I want these events to be independent. <Link className="product-item__link" to={`/products/${product.category}/${product.id}`} > <div className ...

javascripthtmlcssreactjs

The content on my HTML webpage exceeds the width of the screen on mobile devices and certain PCs

I've exhausted most of the solutions available online, yet I haven't been able to resolve the issue. The content on my webpage is appearing wider than the screen size on mobile devices and some PCs URL: html, body,{ max-width: 100%; ...

htmlcssresponsive-designoverflow

How can I effectively develop a versatile user interface for a website using Ruby on Rails that is compatible with all

Currently, I am in the midst of developing a web application using Ruby on Rails. Occasionally, I encounter challenges with cross-browser compatibility when it comes to CSS and Javascript. Are there any strategies you recommend to reduce these issues dur ...

javascriptcss

Is there a way to assign retrieved data to the $scope.variable?

I'm relatively new to both JavaScript and Angular. I have a piece of code that fetches data from an API and successfully prints it to the console, but I'm facing issues when trying to assign this data to $scope.saveData. It seems to only work wit ...

javascripthtmlangularjsweb

Tips for aligning Picture boxes using CSS

As a newbie, I recently received training in HTML, CSS, and a bit of JavaScript. Currently, I am involved in a project where I display the latest news from an API. The technical aspects of fetching data from the API using JavaScript are handled by a senior ...

htmlcssformattingalignment