Image Slider Transition Effects CSS

Image Slider Transition Effects CSS
Code Snippet:CSS image slider w/ new transitions
Author: Avi Kohn
Published: April 4, 2024
Last Updated: April 4, 2024
Downloads: 111
License: MIT
Edit Code online: View on CodePen
Read More

This code implements an Image Slider with Transition Effects using CSS. It displays images in a slideshow format. The transitions between images are smooth and visually appealing. This slider enhances website aesthetics and user experience by showcasing images attractively.

You can use this code on your website’s homepage to showcase featured products or services. It enhances visual appeal and engages visitors with dynamic content. The smooth transitions captivate attention and encourage exploration, potentially increasing user interaction and conversion rates.

How to Create Image Slider Transition Effects Using CSS

1. First of all, load the Prefixfree JS by adding the following CDN link into the head tag of your HTML document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

2. Set up the HTML structure for the slider. Wrap your images inside <li> tags with unique IDs. Each image should be accompanied by a corresponding radio button for navigation.

Replace placeholder images and text with your own content. Update image URLs and add relevant descriptions or captions for each slide.

<ul class="slides">
	<input type="radio" name="radio-btn" id="img-1" checked />
	<li class="slide-container">
		<div class="slide slices" style="background-image: url(http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg)">
			<div class="slice"></div>
			<div class="slice"></div>
		</div>
		<div class="nav">
			<label for="img-6" class="prev">&#x2039;</label>
			<label for="img-2" class="next">&#x203a;</label>
		</div>
	</li>

	<input type="radio" name="radio-btn" id="img-2" />
	<li class="slide-container">
		<div class="slide slices cascade" style="background-image: url(http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg)">
			<div class="slice"></div>
			<div class="slice"></div>
		</div>
		<div class="nav">
			<label for="img-1" class="prev">&#x2039;</label>
			<label for="img-3" class="next">&#x203a;</label>
		</div>
	</li>

	<input type="radio" name="radio-btn" id="img-3" />
	<li class="slide-container">
		<div class="slide">
			<img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
		</div>
		<div class="nav">
			<label for="img-2" class="prev">&#x2039;</label>
			<label for="img-4" class="next">&#x203a;</label>
		</div>
	</li>

	<input type="radio" name="radio-btn" id="img-4" />
	<li class="slide-container">
		<div class="slide slices underise" style="background-image: url(http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg)">
			<div class="slice"></div>
			<div class="slice"></div>
		</div>
		<div class="nav">
			<label for="img-3" class="prev">&#x2039;</label>
			<label for="img-5" class="next">&#x203a;</label>
		</div>
	</li>

	<input type="radio" name="radio-btn" id="img-5" />
	<li class="slide-container">
		<div class="slide">
			<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
		</div>
		<div class="nav">
			<label for="img-4" class="prev">&#x2039;</label>
			<label for="img-6" class="next">&#x203a;</label>
		</div>
	</li>

	<input type="radio" name="radio-btn" id="img-6" />
	<li class="slide-container">
		<div class="slide hslices" style="background-image: url(http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg)">
			<div class="slice"></div>
		</div>
		<div class="nav">
			<label for="img-5" class="prev">&#x2039;</label>
			<label for="img-1" class="next">&#x203a;</label>
		</div>
	</li>

	<li class="nav-dots">
		<label for="img-1" class="nav-dot" id="img-dot-1"></label>
		<label for="img-2" class="nav-dot" id="img-dot-2"></label>
		<label for="img-3" class="nav-dot" id="img-dot-3"></label>
		<label for="img-4" class="nav-dot" id="img-dot-4"></label>
		<label for="img-5" class="nav-dot" id="img-dot-5"></label>
		<label for="img-6" class="nav-dot" id="img-dot-6"></label>
	</li>
</ul>

3. Apply CSS styling to customize the appearance and behavior of the slider. Adjust dimensions, colors, and transitions to match your website’s design theme. You can find predefined styles in the provided CSS code.

/* Specify the duration of all major transitions */
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
html, body {
  min-height: 100%;
  background: #333 url("https://codepen.io/images/classy_fabric.png");
}

.slides {
  padding: 0;
  width: 640px;
  height: 425px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.slides * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.slides input {
  display: none;
}

.slide-container {
  display: block;
}

.slide {
  top: 0;
  opacity: 0;
  width: 640px;
  height: 425px;
  display: block;
  position: absolute;
  transform: scale(0);
  transition: all 0.7s ease-in-out;
}

.slide img {
  width: 100%;
  height: 100%;
}

.nav label {
  top: 0;
  width: 200px;
  height: 100%;
  display: none;
  position: absolute;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
  transition: opacity 0.2s;
  color: #FFF;
  font-size: 156pt;
  text-align: center;
  line-height: 380px;
  font-family: "Varela Round", sans-serif;
  background-color: rgba(255, 255, 255, 0.3);
  text-shadow: 0px 0px 15px #777777;
}

.slide:hover + .nav label {
  opacity: 0.5;
}

.nav label:hover {
  opacity: 1;
}

.nav .next {
  right: 0;
}

input:checked + .slide-container .slide {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label {
  display: block;
}

.nav-dots {
  width: 100%;
  bottom: 9px;
  height: 11px;
  display: block;
  position: absolute;
  text-align: center;
}

.nav-dots .nav-dot {
  top: -5px;
  width: 11px;
  height: 11px;
  margin: 0 4px;
  cursor: pointer;
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover,
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
  background: rgba(0, 0, 0, 0.8);
}

/*-----------------------------------
	/ Transitions

	Remove this section to revert to default shrink/opacity transition.
*/
/*-----------------------------------
	/ Transitions / Slices
*/
/* (Multiple of 3) + 2, add one .slice for every 3 extra slices */
.slide.slices {
  opacity: 1;
  transform: none;
  position: absolute;
  background-size: 0 0;
}

.slices:after,
.slices:before,
.slices .slice,
.slices .slice:before,
.slices .slice:after {
  top: -100%;
  height: 100%;
  position: absolute;
  background-image: inherit;
  background-size: auto 100%;
  transition: top 0.7s;
  transform: translateZ(0);
}

.slices .slice,
.slices:before,
.slices:after {
  width: 12.5%;
}

.slices:after,
.slices:before,
.slices .slice:before,
.slices .slice:after {
  content: "";
  transition-property: transform, top;
}

.slices .slice:before,
.slices .slice:after {
  width: 100%;
  transform: translateY(100%);
}

.slices:before {
  left: 0;
}

.slices:after {
  right: 0;
  background-position-x: 100%;
  transition-delay: 700ms;
}

.slices .slice:before {
  left: -100%;
}

.slices .slice:after {
  left: 100%;
}

.slices .slice:nth-child(2):before {
  background-position-x: 57.1428571429%;
  transition-delay: 500ms, 400ms;
}

.slices .slice:nth-child(2) {
  left: 62.5%;
  background-position-x: 71.4285714286%;
  transition-delay: 500ms;
}

.slices .slice:nth-child(2):after {
  background-position-x: 85.7142857143%;
  transition-delay: 500ms, 600ms;
}

.slices .slice:nth-child(1):before {
  background-position-x: 14.2857142857%;
  transition-delay: 200ms, 100ms;
}

.slices .slice:nth-child(1) {
  left: 25%;
  background-position-x: 28.5714285714%;
  transition-delay: 200ms;
}

.slices .slice:nth-child(1):after {
  background-position-x: 42.8571428571%;
  transition-delay: 200ms, 300ms;
}

/*-----------------------------------
	/ Transitions / Slices / Active
*/
input:checked + .slide-container .slide.slices {
  transition: all 0.7s ease-in-out;
}

input:checked + .slide-container .slide.slices .slice,
input:checked + .slide-container .slide.slices:after,
input:checked + .slide-container .slide.slices:before {
  top: 0%;
}

input:checked + .slide-container .slide.slices .slice:before,
input:checked + .slide-container .slide.slices .slice:after {
  top: 0%;
  transform: translateY(0);
}

/*----------------------------------
	/ Transitions / Cascade
*/
.slide.slices.cascade {
  transform: scale(0);
}

/*----------------------------------
	/ Transitions / Cascade
*/
input:checked + .slide-container .slide.slices.cascade {
  transform: none;
}

/*----------------------------------
	/ Transitions / Underise
*/
.slide.slices.underise {
  transform: scale(0);
}

.slices.underise:after,
.slices.underise:before,
.slices.underise .slice,
.slices.underise .slice:before,
.slices.underise .slice:after {
  top: 100%;
}

/*----------------------------------
	/ Transitions / Underise
*/
input:checked + .slide-container .slide.slices.underise {
  transform: none;
}

/*-----------------------------------
	/ Transitions / Horizontal Slices
*/
/* (Multiple of 3) + 2, add one .slice for every 3 extra slices */
.slide.hslices {
  opacity: 1;
  z-index: -1;
  transform: none;
  position: absolute;
  background-size: 0 0;
}

.hslices:after,
.hslices:before,
.hslices .slice,
.hslices .slice:before,
.hslices .slice:after {
  left: 100%;
  width: 100%;
  position: absolute;
  background-image: inherit;
  background-size: 100% auto;
  transition: left 0.7s;
  transform: translateZ(0);
}

.hslices .slice,
.hslices:before,
.hslices:after {
  height: 20%;
}

.hslices:after,
.hslices:before,
.hslices .slice:before,
.hslices .slice:after {
  content: "";
  transition-property: transform, left;
}

.hslices .slice:before,
.hslices .slice:after {
  height: 100%;
  transform: translateX(100%);
}

.hslices:before {
  top: 0;
}

.hslices:after {
  bottom: 0;
  background-position-y: 100%;
  transition-delay: 400ms;
}

.hslices .slice:before {
  top: -100%;
}

.hslices .slice:after {
  top: 100%;
}

.hslices .slice:nth-child(1):before {
  background-position-y: 25%;
  transition-delay: 200ms, 100ms;
}

.hslices .slice:nth-child(1) {
  top: 40%;
  background-position-y: 50%;
  transition-delay: 200ms;
}

.hslices .slice:nth-child(1):after {
  background-position-y: 75%;
  transition-delay: 200ms, 300ms;
}

/*-----------------------------------
	/ Transitions / Horizontal Slices / Active
*/
input:checked + .slide-container .slide.hslices {
  z-index: 0;
  transition: all 0.7s ease-in-out;
}

input:checked + .slide-container .slide.hslices .slice,
input:checked + .slide-container .slide.hslices:after,
input:checked + .slide-container .slide.hslices:before {
  left: 0%;
}

input:checked + .slide-container .slide.hslices .slice:before,
input:checked + .slide-container .slide.hslices .slice:after {
  left: 0%;
  transform: translateY(0);
}

That’s all! hopefully, you have successfully created an Image Slider with transition Effects on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment