Adding a CSS fadein to a webpage

Question

I am in the process of creating a slideshow in a webpage for a personal project I'm messing about with, and while I know a bit about HTML and Javascript, I'm still not too familiar with CSS.

To that extent, I found the code on this page:

https://www.w3docs.com/tools/code-editor/3720

which does 95 percent of what I'm wanting to acheive, which is great. However, I would like to add a fade-in to my images, and not just have them appear onscreen after the fade-out.

Can someone help me add the correct code to make this happen? Once I see what goes where, I can figure things out from that point, but as I say I'm not up to speed with CSS and how exactly it works.

Many thanks! Joseph.

Answer 1

Point 1:- The link: https://www.w3docs.com/tools/code-editor/3720 you provided is complete explanation of your problem. But the output is achieved in the link: https://www.w3docs.com/tools/code-editor/3720 is only by using HTML, CSS3 & JS!

Point 2:- Also I want you to read the main article of the provided link output you want to achieve https://www.w3docs.com/snippets/css/how-to-create-an-image-slider-or-slideshow.html by reading this you will better understand how you can achieve image slider or any type of slider simply using HTM, CSS3 & JS.

Point 3:- If you have any doubts related to it feel free to ask. I will be happy to help you.

Point 4:- In below given Code snippets Picked from https://www.w3docs.com/tools/code-editor/3720 In CSS3 code the block of code from line 84 to 105 the fade-in code is there if you want to fade-in your image in your custom project you can pick that block of code and use it as you need By providing "fade" as class to particular element/tag in html!

/* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  @-webkit-keyframes fade {
    from {
      opacity: .4
    }
    to {
      opacity: 1
    }
  }
  @keyframes fade {
    from {
      opacity: .4
    }
    to {
      opacity: 1
    }
  }

let slideIndex = 0;
let timeoutId = null;
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");

showSlides();

function currentSlide(index) {
  slideIndex = index;
  showSlides();
}

function plusSlides(step) {

  if (step < 0) {
    slideIndex -= 2;

    if (slideIndex < 0) {
      slideIndex = slides.length - 1;
    }
  }

  showSlides();
}

function showSlides() {
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    dots[i].classList.remove('active');
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].classList.add('active');
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = setTimeout(showSlides, 5000); // Change image every 5 seconds
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #ffffff;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #ffffff;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #999999;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #111111;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Slideshow Images</title>
</head>

<body>
  <div class="slideshow-container">
    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="https://www.w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width:100%">
      <div class="text">London, Ebgland</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="https://www.w3docs.com/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width:100%">
      <div class="text">Sunset in Romania</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="https://www.w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width:100%">
      <div class="text">New York, USA</div>
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br>
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(0)"></span>
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
  </div>
</body>

</html>