Fade in images smoothly

Currently, I am in the process of creating a visually appealing image "slider" for a landing page on one of my websites. The slider that I have already created is fully functional and successful, but I am looking to take it up a notch...

My goal is to incorporate a feature that enables crossfading images upon selection (when a tile is clicked below the main image area), similar to what is explained on this website here (under Demo 6 - Fading between multiple images on click).

I attempted to integrate the code from this site into the existing JS code that I have added within the HTML file. Unfortunately, it seems to be causing conflicts with the current elements. You can find the JSFiddle for the current code here.

@charset "utf-8";
/* CSS Document */

html {
box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.main-slide {
height: 250px;
width: 750px;
margin: auto;
}

.selection-panel {
opacity: 0.6;
filter: alpha(opacity=60);
}

.selection-panel:hover {
opacity:1.0;
filter: alpha(opacity=100);
}

.selection-panel-off {
opacity: 1.0;
filter: alpha(opacity=100);
}

.margins {
margin-top: 16px!important;
margin-bottom: 16px!important;
}

.image-spacing,.image-spacing>.single-col {
padding: 0 8px;
}

.single-col {
float: left;
width: 100%;
}

.single-col.third {
width: 33.33333%;
}

.image-spacing::after,.image-spacing::before {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage Baner Module</title>
<link rel="stylesheet" href="formatting.css" type="text/css" media="screen">
<style>
.mySlides {display:none}
.demo {cursor:pointer}
</style>
</head>

<body>
<div class="main-image" style="max-width:750px">
    <img class="mySlides" src="https://dummyimage.com/750x250/ff5100/fff" height="250px" width="100%">
        <img class="mySlides" src="https://dummyimage.com/750x250/00ff51/fff" height="250px" width="100%">
        <img class="mySlides" src="https://dummyimage.com/750x250/0055ff/fff" height="250px" width="100%">

    <div class="margins image-spacing">
        <div class="single-col third">
            <img class="demo selection-panel" src="https://dummyimage.com/750x250/ff5100/fff" style="width:100%" onclick="currentDiv(1)">
            </div>
            <div class="single-col third">
            <img class="demo selection-panel" src="https://dummyimage.com/750x250/00ff51/fff" style="width:100%" onclick="currentDiv(2)">
            </div>
            <div class="single-col third">
            <img class="demo selection-panel" src="https://dummyimage.com/750x250/0055ff/fff" style="width:100%" onclick="currentDiv(3)">
            </div>
</div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" selection-panel-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " selection-panel-off";
}
</script>

</body>
</html>

javascripthtmlcss

Answer №1

Here is a technique to achieve this effect. Assuming all your images can fit nicely in the same container size, we will organize them within a dedicated container element. If not, consider using background images instead. First, let's place all the .mySlides elements inside their own container:

<div class="slides-container"> 
    <img class="mySlides initopacity" src="https://dummyimage.com/750x250/ff5100/fff" height="250px" width="100%">
    <img class="mySlides" src="https://dummyimage.com/750x250/00ff51/fff" height="250px" width="100%">
    <img class="mySlides" src="https://dummyimage.com/750x250/0055ff/fff" height="250px" width="100%">
 </div>

Next, we'll position these slides absolutely with respect to the container:

.slides-container{
  width: 750px;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.mySlides {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

By doing so, they will be stacked on each other. The initial visibility is set as hiding for all slides, except for the first one which has '.initopacity' class to keep it visible upon loading:

.initopacity {
  opacity: 1;
}

To trigger the opacity change on click, we will implement transitions:

.fadeout {
  opacity: 0;
  transition: opacity 1s linear;
}

.fadein {
  opacity: 1;
  transition-delay: 1s;
  transition-property: opacity;
  transition-duration: 1s;
}

In the showDivs function, classes are added and removed to manipulate opacity instead of altering display properties:

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[0].classList.remove('initopacity');
    x[i].classList.remove('fadein');
    x[i].classList.add('fadeout');
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" selection-panel-off", "");
  }
  x[slideIndex-1].classList.remove('fadeout')
  x[slideIndex-1].classList.add('fadein')
  dots[slideIndex-1].className += " selection-panel-off";
}

Check out the live example on: https://jsfiddle.net/pt5bLxv2/87/

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

Sequential queuing of transitions in CSS3

Is it possible to queue CSS transitions with the same properties? My goal is to translate an element to a specific position (with a transition duration of 0) before translating it again. For example, in this mockup, clicking "move" should move the box 100 ...

javascriptjqueryhtmlcss

Error in ReactJS: Module ""."" not found

I encountered an issue when attempting to call a function inside that retrieves an asset URL from the local directory. The error message displayed was missing module "." The function operates flawlessly outside of the require function. header.jsx class ...

javascriptnode.jsreactjs

Having a CSS position fixed within a div container with the same width as its parent container

At the moment, I have three sections: left, center, and right. I want to add a fixed position div (notification) inside the center section so that it remains in place when scrolling. Additionally, I want this notification to resize according to changes in ...

htmlcss

"Owlcarousel Slider: A beautiful way to showcase

Currently, I am working on a project that involves implementing a slider. Since I lack expertise in JavaScript, I opted to use a plugin called owlcarousel. The challenge I'm encountering relates to the sizing of the container for the items. I'm ...

javascriptjqueryhtmlcssowl-carousel

Tips for restricting the size of inserted content in a contentEditable paragraph

I am in need of a one-line editable paragraph that can contain text without overflowing its size. Currently, I am using CSS to hide the overflow and prevent multiple lines by not displaying the children of the paragraph. However, what I really want is fo ...

javascripthtmlcssoverflowcontenteditable

Can you explain the concept of a function value?

In the world of JavaScript (ECMAScript 5), functions are highly esteemed (referred to as "first-class functions"). This unique characteristic allows us to treat functions as expressions, which means they can produce values and even include other expressio ...

javascriptfunctionecmascript-5

Is it possible for Angular.js to interact with JSTL expression language?

Is it possible for angular.js to interact with JSTL expression language? I am trying to generate ng-options using an array. Here is an example of what I am attempting to accomplish: <select ng-model="detail" ng-init="Categories = '${Categories}& ...

javascriptangularjsjstlangularjs-ng-repeatangularjs-ng-init

Unable to resize the div to fit the content

My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...

htmlcssheight

Linking to an external website using AngularJS for navigation

After developing my angular app, I included an array of menu items that are displayed in the template: <nav id="menu"> <ul> <li ng-repeat="i in menuItems" ui-sref="{{ i | removeSpacesThenLowercase }}" ui-sref-active=" ...

javascriptangularjsangular-ui-routerui-sref

Extracting data from a web service and populating an OWC11 spreadsheet with 10,000 rows

Having an issue with the web service call taking too long to return. The ASP.NET page is taking over a minute to start loading. Currently, I am using C# Response.Write() to output the data to Javascript for insertion into OWC11 spreadsheet. I'm lookin ...

c#javascriptjqueryasp.net.net

Tips for creating a sticky bootstrap column that remains in place as you scroll

I am looking to design a FAQ page similar to Twitter's FAQ. The goal is to have the left column remain fixed in its position while allowing users to scroll through the content. Here is what I have attempted so far, but it is not functioning as expect ...

cssvue.jsbootstrap-4scroll

Enigmatic marking hovering over sunken navigation bar

My navbar is functioning perfectly, but there is a mysterious black line below the burger icon when the menu collapses. Any suggestions on how to remove this unwanted styling would be greatly appreciated. https://i.sstatic.net/CelqJ.png <!DOCTYPE html ...

htmlcssnavbarbootstrap-grid

Converting a variety of form fields containing dynamic values into floating point numbers

Trying to parse the input fields with a specific class has presented a challenge. Only the value of the first field is being parsed and copied to the other fields. https://i.stack.imgur.com/QE9mP.png <?php foreach($income as $inc): ?> <input ty ...

javascriptjquery

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another

I created a sidebar navigation that displays submenus on mouseover, but I want them to open on click and close when clicking on the same tab. Please take a look at my code on this CodePen link. Thank you. <nav class="navigation"> <ul class="mai ...

javascripthtmlcss

Having trouble with the input search function displaying the wrong date on the material date picker? You may need to convert it

I have customized the MomentDateAdapter to meet my specific requirements. Interestingly, when I choose a date from the calendar, the output is accurate. However, if I enter a date manually in the input field, the output is incorrect. When dealing with the ...

javascriptangularangular-material

Node.js and SQL: Verify if a specific value exists in the column

In the process of developing a Discord bot using Node.js (discord.js), I have created a command named !add that requires 2 or more arguments. For example, !add Name This is the reply, where Name corresponds to args[0]. As part of my code, I check whether t ...

javascriptmysqlsqlnode.js

Detect the initial collision exclusively (Collision detection using raycasting)

I am currently working on a never-ending runner game where a character is positioned at (0,0) and can only move along the X-axis by using arrow keys or the mouse. There are two different types of objects moving from z = -10000 towards the character, and on ...

javascriptthree.js

"Despite using the same CSS and HTML code, the fonts appear distinct from each

Feeling lost here, not understanding what's going on. I made changes in Elementor on my first PC and later noticed that the font looked a bit different. I tried to revert the changes but had no luck. I also work on my second PC where the browser showe ...

htmlcssfonts

The function `open` is not a valid prop for the `Dialog` component

Upon clicking an icon, a dialog box containing a form should appear for either adding a tab or deleting a specific tab. I have utilized reactjs, redux, and material-ui for the components. While I am able to display the dialog box when the icon is clicked, ...

javascriptreactjsreduxmaterial-ui

Angular formly - Enhancing User Input Focus

I have created a field wrapper that converts normal text into an input when hovered over with the mouse. Additionally, I have a directive that sets focus on the field when it is activated. Now, I am looking for a solution where the field remains open as l ...

javascripthtmlangularjsangular-formly