The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images:

.slideshow li:child(1) span { 
    background-image: url(../../pic/bg1.jpg); 
}
.slideshow li:child(2) span { 
    background-image: url(../../pic/bg2.jpg);
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s; 
}
.slideshow li:child(3) span { 
    background-image: url(../../pic/bg3.jpg);
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s; 
}

However, I am encountering an issue where the images overlap during transitions in the slideshow. This results in poor slideshow quality and sometimes it even stops sliding altogether. Do you have any suggestions on how I can improve my code to fix this problem?

javascripthtmlcss

Answer №1

I have encountered a similar issue before where overlapping images may be caused by the lack of defined "opacity" parameter in your CSS. By controlling the timing of each image's opacity, you can achieve a fade-in and out effect for your slideshow cycle to restart properly.

For example, if your slideshow cycle is 16 seconds long and the second image starts animating at the 8th second, you can calculate at what points the first image should fade in and out to create a visually appealing transition. Using CSS "@keyframes" property, you can define the animation like this:


@keyframes imageAnimation {
  0% { opacity: 0; animation-timing-function: ease-in; }
  25% { opacity: 1; animation-timing-function: ease-out; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}

Try implementing this and let us know how it works for you.

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

What are some methods for singling out a specific table row?

When working on my app, I faced the task of importing a JSON file and displaying its contents in a table with 3 columns. However, there are two main issues that arose: Utilizing array index for the row key is not recommended due to the table also having ...

javascriptarraysjsonreactjshtml-table

Utilizing an Angular Service within a method, embedded in a class, nested inside a module

module Helper { export class ListController { static handleBatchDelete(data) { // Implementing $http functionality within Angular ... $http.post(data) } } } // Trigger on button click Helper.ListController. ...

javascriptangularjstypescriptangularjs-service

Converting Node.js Date.toString() output into a time format in Go

My go service is currently receiving data from an external source. Here's how the data appears (in JSON format)- { "firstName": "XYZ", "lastName": "ABC", "createdAtTimestamp": "Mon Nov 21 2 ...

javascriptnode.jsgo

Using jQuery to automatically scroll to the bottom of a div when sliding down

When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...

javascriptjqueryhtmlcss

The link that has been clicked on should remain in an active state

Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue? $("a").click(function () { if ($(this).hasClass("acti ...

javascripthtmljquerycss

How can I retrieve the Google Maps URL containing a 'placeid' using AJAX?

I have a specific URL that I can access through my browser to see JSON data. The URL appears as follows: https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJZeH1eyl344kRA3v52Jl3kHo&key=API_KEY_HERE However, when I attempt to use jQuer ...

javascriptjqueryjsonajaxgoogle-maps

Components drifting apart following viewport adjustments

Can someone help me with this issue in responsiveness? When I change the viewport, my header and main elements seem to be moving far apart from each other. View the code on JSFiddle <header> <div class="slider"> <img src="picture1" al ...

htmlcssresponsiveelement

What is the best way to apply a jQuery function to multiple div elements simultaneously?

I am looking to implement a show/hide feature for a <div> using JavaScript and DOM properties. The idea is to use JavaScript's onclick() function with two buttons, show and hide, each in their respective <div>. Here is how it would ideall ...

javascriptjquery

Secure an input field for exclusive attention. React

How can I lock the focus of my input field? I attempted using the following code: onBlur={this.click()} However, it was not successful. What is the correct way to accomplish this? ...

javascriptreactjs

What steps are needed to resolve the issue of inserting data into a database using Sequelize with Node Express and M

I am currently in the process of developing a straightforward registration form that will lead to additional CRUD operations using node.js. So far, I have set up the MySQL database and completed the modeling and connection with Sequelize. I have also desi ...

javascriptmysqlnode.jsexpresssequelize.js

Generate a dynamic text-box and drop-down list using HTML and JavaScript

My current project involves generating dynamic text-boxes based on the selection from a drop-down list and input field. https://i.sstatic.net/CMtW9.png When a user chooses 'Option 1' from the drop-down list and enters input such as 'grass& ...

javascripthtmlvue.js

using angularjs to dynamically apply css styles

Below is the input I have: The HTML code is shown below: <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> This is the corresponding CSS code: .negative { color: red; } If the amount is positive, no specif ...

javascripthtmlcssangularjsng-class

Issue with reCAPTCHA callback in Firebase Phone Authentication not functioning as expected

I have been working on integrating phone authentication into my NextJS website. I added the reCAPTCHA code within my useEffect, but for some reason, it does not get triggered when the button with the specified id is clicked. Surprisingly, there are no erro ...

javascriptfirebasenext.jsfirebase-authenticationrecaptcha

Limited achievements seen with AJAX. Occasionally, either no data is retrieved or an error is encountered

My experience with AJAX has been frustrating so far. I am trying to populate some textboxes with values from a database, but nothing is getting inserted. The only thing that's happening is the appearance of two errors related to specific values which ...

javascriptphpjqueryajax

Using TypeORM in Javascript to create routes efficiently

After examining the TypeORM websites examples, I noticed that some of them demonstrate routing usage using TypeScript. Given that TypeORM has the capability to use JavaScript instead of TypeScript, I am seeking guidance on how to implement Express routing ...

javascriptnode.jsexpresstypeorm

Attempting to retrieve an image from a specified div ID within Android Studio

I find myself at a loss for where to even begin with this issue, so I've been stumbling through it. While I've come across some similar posts, I haven't had any success in making them work. My goal is to utilize the div id to retrieve a spe ...

androidimagehtmlgetelementsbytagname

Organize data in a Vue.js table

Currently facing an issue with sorting my table in vue.js. Looking to organize the table so that campaigns with the highest spend are displayed at the top in descending order. Here is the code I'm working with: <template> <div class=" ...

javascripthtmlvue.js

Text in HTML/CSS is refusing to indent properly within boxes

I am working on a web page that animates boxes and displays text details. However, I am facing an issue where the text does not align properly inside the flipped box. I would like to decrease the font size of the text in the flipped box. Despite trying to ...

htmlcss

The html select option tag is automatically closed because of the presence of the "/" character within the dynamic value in JSP and JSTL

<select id="ordersSelect" class="drop-down" onchange="somemethod()"> <c:forEach items="${orders}" var="order" varStatus="orderStatus"> <option value="${order.id}"> ${order.publicId} </option> </c:forEach> </select> ...

htmljspjstlhtml-select

Unique CSS animation effect for mouse hover interaction

I am working with a set of buttons that have an animation named "slideIn". The keyframes for this animation are as follows: @keyframes slideIn { 0% {opacity: 0; transform: translate(-200px);} 100% {opacity: 1; padding-left: 110px; w ...

cssanimationhover