Creating an animated slider using CSS styling

I am currently in the process of developing a Drupal website. One of the features on the homepage includes three images displayed side by side, each representing different news articles. My goal is to have a red transparent overlay appear on the second and third image initially. Then, after 5 seconds, I want the first and third images to be highlighted with the overlay, followed by the first and second images after another 5 seconds. This cycling highlight effect should continue every 5 seconds.

Despite my extensive research on both this platform and the internet, including attempts with CSS Keyframes, I have not been successful in achieving this desired outcome. For reference, here is an example image showing how the effect should look: https://i.sstatic.net/2ciWp.jpg

If anyone can offer assistance or guidance on how to accomplish this task, it would be greatly appreciated! Thank you in advance for your help.

PS: The OWL Slider plugin was used to display the images on the homepage.

jquerycssslider

Answer №1

If you want to create an interesting effect using CSS, you could utilize the `background:url(...)` property along with the `:before` pseudo element on a div. By adjusting timing and delays, you can achieve something like this:

div{
  width:150px;
  height:150px;
  position:relative;
  display:inline-block;
  background:url(http://placekitten.com/g/300/300);
  background-size:100% 100%;
  }
div:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:rgba(255,0,0,0.3);
  -webkit-animation: showw 6s infinite;
  animation: showw 6s infinite;
  }

div:nth-child(2):before{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  }

div:nth-child(3):before{
    -webkit-animation-delay: 4s;
  animation-delay: 4s;
  }

@-webkit-keyframes showw{
  0%, 30% {background:rgba(255,0,0,0);}
  35%, 60% {background:rgba(255,0,0,0.3);}
  }
@keyframes showw{
  0%, 30% {background:rgba(255,0,0,0);}
  35%, 60% {background:rgba(255,0,0,0.3);}
  }
<div></div>
<div></div>
<div></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

Avoid triggering a keydown event if certain div elements have been clicked

When the user presses the space bar, my script is set up to perform certain actions, such as stopping an audio player: $('html').keydown(function(e){ if(e.keyCode == 32){ // Stop the audio player } } However, an issue arises when a ...

javascriptjqueryhtmlfunctionkeydown

Issue with SharePoint Rest API search query functionality

Hey there! I'm currently facing issues with calling the Sharepoint Rest API for a search query. I can't seem to figure out why it's not working. Additionally, I'm unsure if my URL input is correct. Below is the code snippet I've w ...

javascriptjqueryajaxsharepoint

How to make a JQuery list item unselectable when appending it

I encountered a strange issue while using jQuery to append items to a list. <ul id="idNicheItems" class="clScrollItems ui-widget-content ui-corner-all"> <li id="NicheItem_1"> Item 1</li> <li id="NicheItem_2"> Item 2</li& ...

javascriptjquerylistappend

Preventing Double Click Events on jQuery Spinner

I have been working on an option picker, but now there is a new requirement to make the options configurable. While this shouldn't be too difficult, I am facing some issues with the option picker: Currently, when an item is double-clicked, it will ge ...

javascriptjqueryhtml

In a production environment, jQuery's ajax functionality may encounter issues specifically on Internet Explorer

I am experiencing an issue with making a service call using jQuery's ajax function. During testing on my local environment in both IE and Chrome, the call works properly. However, once our site is deployed to production, I can only get the service cal ...

javascriptinternet-explorerjquery

By utilizing JavaScript/jQuery, you can validate URLs to ensure they begin with either http or https and include

Looking for guidance on how to validate a URL with either http or https and www included. Appreciate it, Amit ...

javascriptjquery

Implement a responsive navigation bar on an HTML webpage

I'm currently working on implementing a toggle menu bar for my PHP website. Here's the HTML code: <div class="row"> <div class="col-sm-4 col-md-3 sidebar"> <div class="mini-submenu" > <img src="icons/nav ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

What is the best way to pass a value to a PHP file and then redirect to it?

I am facing an issue with retrieving the id of a button with "orderdetail" class in an HTML document using jQuery. I want to pass this id to a PHP document, redirect to that PHP file, and then process the id using POST method. However, I keep getting an er ...

phpjqueryhttp-redirect

React Card with Overflowing TableCell Texts

I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...

cssreactjsmaterial-uijss

The fixed sidebar in Bootstrap is causing an overlap issue with the main content

My knowledge of Bootstrap and CSS is limited, but I am eager to create a website with a fixed sidebar, top navigation bar, and scrollable main content. The fixed navbar is functioning properly, as is the layout of the sidebar and main content. However, wh ...

htmlcsstwitter-bootstrap

iPhone experiencing no response to HTTPS AJAX request

$(function () { var apiEndpoint = "https://www.myaddress.com/api/"; var getVersion = $.ajax({ url: apiEndpoint + "version/", dataType: "JSON", username: "myuser", type: "GET", password: "mypass" }); ...

javascriptjqueryiosajaxsafari

Customize your Bootstrap 4 navbar to break and float on the right side for a

Is there a way to achieve a similar layout using Bootstrap 4, with centered menu items in the second row like this: https://i.sstatic.net/l1EOx.gif I successfully created this design with Bootstrap 3, but I'm struggling to replicate it with Bootstra ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Looking for a practical ajax demonstration for Django forms?

Looking to replicate functionality similar to http://www.w3schools.com/jquery/jquery_ajax_get_post.asp in a Django environment. Despite successful testing with localhost + PHP, attempts in Django have been unsuccessful. Below is an example based on the ref ...

jqueryajaxdjango

How can we create and improve the visibility of the navigation for the UIKit slider

Is there a way to keep the navigation arrows of the Uikit slider always visible or add navigation circles below the slider? Your help is greatly appreciated. ...

htmlcssgetuikit

Issues with Media Queries on Desktop Devices

I've encountered an odd issue with my media queries. While they function properly on my mobile devices, resizing my desktop browser doesn't seem to trigger the changes. This prevents me from inspecting my mobile styles using web inspector/firebug ...

htmlcssmedia-queries

Utilizing jQuery to enable a div to follow the touchmove or mousemove events while also automatically

I am looking to create a basic function in my jQuery script. I want the pages to slide horizontally in response to the movement of a finger or cursor on the screen. While there are many plugins available for this purpose, I prefer a simple, customized solu ...

javascriptjqueryhtmltouchmousemove

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

Implementing Recursive Ajax Calls in Internet Explorer 9

When making a recursive ajax call to the server with Internet Explorer 9, an endless loop may occur. This code snippet functions properly in Chrome: function readMessages() { // console.log("Starting ajax"); $.ajax({ u ...

jqueryajaxinternet-explorerrecursioninternet-explorer-9

Conceal portion in HTML until revealed

I am attempting to create 3 sections within a single HTML file using the <section id="id"> tag, and I want to be able to open each section by clicking a link in the header with <a href="#id">1</a>, and then close it when another section i ...

javascriptphphtmlcss

Arrange an item independently of surrounding elements

Is it possible to position an element across two columns, starting in the middle of the second column? The columns are defined by divs. Could this be achieved through z-index positioning? ...

css