Image Slider Transition Effects CSS

By Asif MughalCarousel
Image Slider Transition Effects CSS
Code Snippet:CSS image slider w/ new transitions
Demo URL:View Demo
Download Link:Download
Author:Avi Kohn
Official Website:Visit Website

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.

By Asif Mughal

I'm Asif Mughal, a passionate full stack Web Developer deeply committed to crafting intuitive and impactful web applications. My journey in web development began with a curiosity for technology and a desire to create meaningful solutions. I specialize in both front-end and back-end technologies, where I thrive on solving intricate challenges and delivering polished, user-friendly experiences.

Beyond coding, I have a relentless drive for learning, constantly exploring new technologies and methodologies to stay at the forefront of my field. Sharing my knowledge through writing and mentoring is a fulfilling aspect of my career, as I believe in empowering others and contributing to the growth of our community.

You might also like:

Simple JavaScript Image Slider Code

Simple JavaScript Image Slider Code

Automatic Image Slideshow Effect in HTML CSS JavaScript

Automatic Image Slideshow Effect in HTML CSS JavaScript

Auto Image Slider in HTML Source Code

Auto Image Slider in HTML Source Code

Leave a Reply

Your email address will not be published. Required fields are marked *