Css3-image-slider-with-stylized-thumbnails

Developer
Mariam Massadeh
Size
2,576 Kb
Views
66,792
  1. Css3-image-slider-with-stylized-thumbnails Previews
  2. Css3-image-slider-with-stylized-thumbnails HTML Codes
  3. Css3-image-slider-with-stylized-thumbnails CSS Codes

How do I make an css3-image-slider-with-stylized-thumbnails?

/* from: http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails*/. What is a css3-image-slider-with-stylized-thumbnails? How do you make a css3-image-slider-with-stylized-thumbnails? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.

Css3-image-slider-with-stylized-thumbnails Previews
IQ Test

Css3-image-slider-with-stylized-thumbnails - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css3-image-slider-with-stylized-thumbnails</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
We will make a slider with stylized thumbnails using CSS3
The markup is very simple:
Radio Inputs
Labels with thumbnails to detect click event
Main Image
-->
<div class="slider">	<input type="radio" name="slide_switch" id="id1"/>	<label for="id1">	<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>	</label>	<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>	<!--Lets show the second image by default on page load-->	<input type="radio" name="slide_switch" id="id2" checked="checked"/>	<label for="id2">	<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>	</label>	<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>	<input type="radio" name="slide_switch" id="id3"/>	<label for="id3">	<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>	</label>	<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>	<input type="radio" name="slide_switch" id="id4"/>	<label for="id4">	<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>	</label>	<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>	<input type="radio" name="slide_switch" id="id5"/>	<label for="id5">	<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>	</label>	<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>
<!-- We will use PrefixFree - a script that takes care of CSS3 vendor prefixes
You can download it from https://leaverou.github.com/prefixfree/ -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Css3-image-slider-with-stylized-thumbnails - Script Codes CSS Codes

/*Time for the CSS*/
* {margin: 0; padding: 0;}
body {background: #ccc;}
.slider{	width: 640px; /*Same as width of the large image*/	position: relative;	/*Instead of height we will use padding*/	padding-top: 320px; /*That helps bring the labels down*/	margin: 100px auto;	/*Lets add a shadow*/	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
/*Last thing remaining is to add transitions*/
.slider>img{	position: absolute;	left: 0; top: 0;	transition: all 0.5s;
}
.slider input[name='slide_switch'] {	display: none;
}
.slider label {	/*Lets add some spacing for the thumbnails*/	margin: 18px 0 0 18px;	border: 3px solid #999;	float: left;	cursor: pointer;	transition: all 0.5s;	/*Default style = low opacity*/	opacity: 0.6;
}
.slider label img{	display: block;
}
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {	border-color: #666;	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {	opacity: 0;	transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {	opacity: 1;	transform: scale(1);
}
/*Clicking on any thumbnail now should activate the image related to it*/
/*We are done :)*/
Css3-image-slider-with-stylized-thumbnails - Script Codes
Css3-image-slider-with-stylized-thumbnails - Script Codes
Home Page Home
Developer Mariam Massadeh
Username MariamMassadeh
Uploaded September 22, 2022
Rating 3.5
Size 2,576 Kb
Views 66,792
Do you need developer help for Css3-image-slider-with-stylized-thumbnails?

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!

Mariam Massadeh (MariamMassadeh) Script Codes
Name
Simple Chat Conversation
Menu with a featured tooltip that has an animation from Jumping Animation pen
Animated Progress Bar
Responsive Menu with sub menu- CSS3 animation, simple jquery
Simple blog container, tool tip, simple animation on hover
CSS3 Animation
Receipt with result
Tooltip
Notepad pen
Emploee Tree
Create amazing SEO content 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!