Sliding with CSS

Developer
Myron Schippers
Size
1,927 Kb
Views
32,384
  1. Sliding with CSS Previews
  2. Sliding with CSS HTML Codes
  3. Sliding with CSS CSS Codes

How do I make an sliding with css?

What is a sliding with css? How do you make a sliding with css? This script and codes were developed by Myron Schippers on 15 September 2022, Thursday.

Sliding with CSS Previews
IQ Test

Sliding with CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding with CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"></div>
<h2 class="hdg">Hover for Next Slide</2>
<ul class="case case_hoverNext"> <li class="case-slide isPrev"> <div class="case-slide-box case-slide-box_red"></div> </li> <li class="case-slide isActive"> <div class="case-slide-box case-slide-box_blue"></div> </li> <li class="case-slide isNext"> <div class="case-slide-box case-slide-box_purple"></div> </li>
</ul>
<h2 class="hdg">Hover for Previous Slide</2>
<ul class="case case_hoverPrev"> <li class="case-slide isPrev"> <div class="case-slide-box case-slide-box_red"></div> </li> <li class="case-slide isActive"> <div class="case-slide-box case-slide-box_blue"></div> </li> <li class="case-slide isNext"> <div class="case-slide-box case-slide-box_purple"></div> </li>
</ul>
</body>
</html>

Sliding with CSS - Script Codes CSS Codes

/* ---------------------------------------
RESET
--------------------------------------- */
ul { margin: 0; padding: 0; list-style: none;
}
.hdg { text-align: center; margin: 0 0 20px;
}
/* ---------------------------------------
Case
--------------------------------------- */
.case {	position: relative; overflow: hidden; max-width: 50%; margin: 0 auto 40px; background: #333333;
}
.case-slide { position: absolute; top: 0; width: 100%;
}
.case-slide-box {	display: block;	width: 100%;	height: 200px;
}
/**
COLORS
==========
*/
.case-slide-box_blue { background-color: blue;
}
.case-slide-box_red { background-color: red;
}
.case-slide-box_purple { background-color: purple;
}
/**
STATES
==========
*/
.case-slide.isActive { position: relative; left: 0;
}
.case-slide.isNext { left: 100%;
}
.case-slide.isPrev { left: -100%;
}
/**
ON HOVER
- slide to next
==========
*/
.case-slide { -webkit-transition: left 1.5s ease-in-out; -moz-transition: left 1.5s ease-in-out; -o-transition: left 1.5s ease-in-out; transition: left 1.5s ease-in-out;
}
.case_hoverNext:hover .case-slide.isActive {	position: absolute; left: -100%;
}
.case_hoverNext:hover .case-slide.isNext {	position: relative; left: 0;
}
.case_hoverNext:hover .case-slide.isPrev { left: -200%;
}
/**
ON HOVER
- slide to prev
==========
*/
.case_hoverPrev:hover .case-slide { -webkit-transition: left 1.5s ease-in-out; -moz-transition: left 1.5s ease-in-out; -o-transition: left 1.5s ease-in-out; transition: left 1.5s ease-in-out;
}
.case_hoverPrev:hover .case-slide.isActive {	position: absolute; left: 100%;
}
.case_hoverPrev:hover .case-slide.isNext { left: 200%;
}
.case_hoverPrev:hover .case-slide.isPrev {	position: relative; left: 0;
}
Sliding with CSS - Script Codes
Sliding with CSS - Script Codes
Home Page Home
Developer Myron Schippers
Username chbymnky
Uploaded September 15, 2022
Rating 3
Size 1,927 Kb
Views 32,384
Do you need developer help for Sliding with CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Myron Schippers (chbymnky) Script Codes
Name
Loading Dots
Collapsible plugin
Buttons with style
Breadcrumb Challenge v1
JQuery UI Tab Face Lift
Custom Form Fields
Vertical List CSS Module
Breadcrumb Challenge v2
Bicycle
Parallax Ribbon
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!