Sliding image

Developer
Mitch Pruitt
Size
2,497 Kb
Views
14,168
  1. Sliding image Previews
  2. Sliding image HTML Codes
  3. Sliding image CSS Codes

How do I make an sliding image?

Image slides to reveal detail on hover. It's been done before, no biggie.. What is a sliding image? How do you make a sliding image? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

Sliding image Previews
IQ Test

Sliding image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Let's slide some images!</h1>
<div class="collection">
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage2.s3.amazonaws.com/13a84766e9dc11e29d0922000a1faeeb_7.jpg" /> </div> <div class="image-details"> <p>Boy!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage9.s3.amazonaws.com/6114bb20f08e11e288fb22000ae911cc_7.jpg" /> </div> <div class="image-details"> <p>Toy!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage1.s3.amazonaws.com/298a141ef08611e29f8422000ae90872_7.jpg" /> </div> <div class="image-details"> <p>Soy!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage11.s3.amazonaws.com/8c4cdf52f08411e29b1122000ae901a3_7.jpg" /> </div> <div class="image-details"> <p>Koi!</p> </div> </div>
</div> <div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage4.s3.amazonaws.com/902a79ee730411e1989612313815112c_7.jpg" /> </div> <div class="image-details"> <p>Cat!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage2.s3.amazonaws.com/14a1ddf2f09511e29d0222000a1fbc0c_7.jpg" /> </div> <div class="image-details"> <p>Hat!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage6.s3.amazonaws.com/485b8600f09211e2a25d22000a9e5e2e_7.jpg" /> </div> <div class="image-details"> <p>Bat!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage1.s3.amazonaws.com/4d4c0d44f09511e2b52122000a1fa4b5_7.jpg" /> </div> <div class="image-details"> <p>Tat!</p> </div> </div>
</div> <div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage8.s3.amazonaws.com/db64bf567a3211e296ca22000a9f0a36_7.jpg" /> </div> <div class="image-details"> <p>Fun!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage4.s3.amazonaws.com/c3e7eb12f09511e2900c22000a1fb715_7.jpg" /> </div> <div class="image-details"> <p>Sun!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage0.s3.amazonaws.com/a9906672f09511e2808322000a9e0144_7.jpg" /> </div> <div class="image-details"> <p>Run!</p> </div> </div>
</div>
<div class="image-slider"> <div class="slider-content"> <div class="image-preview"> <img class="square-resize" src="https://distilleryimage4.s3.amazonaws.com/02296d94df9611e29aee22000a9f38e6_7.jpg" /> </div> <div class="image-details"> <p>Done!</p> </div> </div>
</div>
</div>
</body>
</html>

Sliding image - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/* Unsucks box-model */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: url(http://mitchpruitt.com/wp-content/uploads/2013/04/IMG_0609.jpg);
}
.collection { width: 800px; margin: auto;
}
.image-slider { width: 200px; height: 200px; margin: 0; overflow: hidden; float: left;
}
.image-slider:nth-of-type(4) { float: clear;
}
.slider-content { -webkit-transition: all .25s ease-in; -moz-transition: all .25s ease-in; -ms-transition: all .25s ease-in; -o-transition: all .25s ease-in; transition: all .25s ease-in; -webkit-backface-visibility: hidden; /* Prevents flicker on transition/transform */
}
.image-preview { width: 200px; height: 200px; margin: 0;
}
.image-details { background: rgb(50, 50, 50); background-image: url(https://subtlepatterns.com/patterns/tweed.png); width: 200px; height: 200px; margin: 0;
}
.image-details p, h1 { color: rgb(255,255,255); font-family: 'Roboto Slab', serif; margin: 0; text-align: center; line-height: 200px; font-size: 50px; text-shadow: 2px 2px 2px rgba(0,0,0,.5); filter: dropshadow(color=#000000, offx=1, offy=1);
}
h1 { line-height: 100px;
}
.image-slider:hover .slider-content { transform: translate(0px, -200px); -webkit-transform: translate(0px, -200px); -moz-transform: translate(0px, -200px); -o-transform: translate(0px, -200px); -ms-transform: translate(0px, -200px);
}
/* IMG Properties */
.square-resize { width: 200px; height: 200px;
}
img { margin: 0; padding: 0;
}
Sliding image - Script Codes
Sliding image - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3.5
Size 2,497 Kb
Views 14,168
Do you need developer help for Sliding image?

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!

Mitch Pruitt (mitchdot) Script Codes
Name
ASCII triangle image overlay
Zoomy image rollover
Off-screen navigation
Segmented control
Snazzy fixed backgrounds
Flexbox-based responsive menu
Image header overlay
Sooper cool article header image
ThisIsMyJam Player
Simple responsive drop-down menu
Create amazing video scripts 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!