Thumbnail Example

Developer
Lauren
Size
2,687 Kb
Views
30,360
  1. Thumbnail Example Previews
  2. Thumbnail Example HTML Codes
  3. Thumbnail Example CSS Codes

How do I make an thumbnail example?

Example of a picture thumbnail that fades in when the user hovers over it. The text also slides down and out of view when the thumbnail is hovered over.. What is a thumbnail example? How do you make a thumbnail example? This script and codes were developed by Lauren on 18 September 2022, Sunday.

Thumbnail Example Previews
IQ Test

Thumbnail Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Thumbnail Example</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { width: 100%; height: 100%;
}
body { margin: 0px; padding: 0px; width: 100%; height: 100%;
}
h1 { margin: 0px; padding: 20px 0px 0px 0px; color: #2D527A; font: bold 50px 'Palatino Linotype', 'Book Antiqua', Palatino, serif; text-align: center;
}
hr { border: 1px solid #CCC; width: 700px;
}
#thumbnails { margin: 0px auto; padding: 0px; text-align: center; width: 100%;
}
.thumbnail { display: inline-block; margin: 10px; padding: 0px; position: relative; border-radius: 5px; width: 225px; height: 150px; overflow: hidden;
}
.thumbnail img { border-radius: 5px; opacity: 0.8; transition: opacity 0.2s linear 0s; width: 225px; height: 150px;
}
.thumbnail figcaption { display: inline-block; padding: 2px 0px; position: absolute; left: 0px; bottom: 0px; background: rgba(255,255,255,0.8); color: #777; font: bold 14px 'Trebuchet MS', Helvetica, sans-serif; text-shadow: 1px 1px 1px #FFF; text-decoration: none; text-align: center; width: 100%; transition: all 0.2s ease-in-out;
}
.thumbnail:hover img { opacity: 1.0;
}
.thumbnail:hover figcaption { bottom: -25px;
}
.reverse_effect img { opacity: 1.0;
}
.reverse_effect figcaption { bottom: -25px;
}
.reverse_effect:hover img { opacity: 0.8;
}
.reverse_effect:hover figcaption { bottom: 0px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>THUMBNAIL EXAMPLE</h1>
<hr />
<br />
<div id="thumbnails"> <a href="#"><figure class="thumbnail"> <img src="https://www.columbia.edu/~ljz2112/test/picture_300x200.png" /> <figcaption href="#">Thumbnail 1</figcaption> </figure></a>	<a href="#"><figure class="thumbnail"> <img src="https://www.columbia.edu/~ljz2112/test/picture_300x200.png" /> <figcaption href="#">Thumbnail 2</figcaption>	</figure></a>	<a href="#"><figure class="thumbnail"> <img src="https://www.columbia.edu/~ljz2112/test/picture_300x200.png" /> <figcaption href="#">Thumbnail 3</figcaption>	</figure></a>	<br />	<a href="#"><figure class="thumbnail reverse_effect"> <img src="https://www.columbia.edu/~ljz2112/test/picture_300x200.png" /> <figcaption href="#">Thumbnail 4</figcaption> </figure></a>	<a href="#"><figure class="thumbnail reverse_effect"> <img src="https://www.columbia.edu/~ljz2112/test/picture_300x200.png" /> <figcaption href="#">Thumbnail 5</figcaption>	</figure></a>	<a href="#"><figure class="thumbnail reverse_effect"> <img src="https://www.columbia.edu/~ljz2112/test/picture_300x200.png" /> <figcaption href="#">Thumbnail 6</figcaption>	</figure></a>
</div>
</body>
</html>

Thumbnail Example - Script Codes CSS Codes

html { width: 100%; height: 100%;
}
body { margin: 0px; padding: 0px; width: 100%; height: 100%;
}
h1 { margin: 0px; padding: 20px 0px 0px 0px; color: #2D527A; font: bold 50px 'Palatino Linotype', 'Book Antiqua', Palatino, serif; text-align: center;
}
hr { border: 1px solid #CCC; width: 700px;
}
#thumbnails { margin: 0px auto; padding: 0px; text-align: center; width: 100%;
}
.thumbnail { display: inline-block; margin: 10px; padding: 0px; position: relative; border-radius: 5px; width: 225px; height: 150px; overflow: hidden;
}
.thumbnail img { border-radius: 5px; opacity: 0.8; transition: opacity 0.2s linear 0s; width: 225px; height: 150px;
}
.thumbnail figcaption { display: inline-block; padding: 2px 0px; position: absolute; left: 0px; bottom: 0px; background: rgba(255,255,255,0.8); color: #777; font: bold 14px 'Trebuchet MS', Helvetica, sans-serif; text-shadow: 1px 1px 1px #FFF; text-decoration: none; text-align: center; width: 100%; transition: all 0.2s ease-in-out;
}
.thumbnail:hover img { opacity: 1.0;
}
.thumbnail:hover figcaption { bottom: -25px;
}
.reverse_effect img { opacity: 1.0;
}
.reverse_effect figcaption { bottom: -25px;
}
.reverse_effect:hover img { opacity: 0.8;
}
.reverse_effect:hover figcaption { bottom: 0px;
}
Thumbnail Example - Script Codes
Thumbnail Example - Script Codes
Home Page Home
Developer Lauren
Username phantomesse
Uploaded September 18, 2022
Rating 3
Size 2,687 Kb
Views 30,360
Do you need developer help for Thumbnail Example?

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!

Lauren (phantomesse) Script Codes
Name
Switching Images
Mondrian Generator
Which Language Spinner
Custom Dropdown Menu
Selecting Products on a Grid
Scrolling Navigation
Simple Dropdown Menu
Hover Buttons
Text Search
Flexbox Column Stretch
Create amazing marketing copy 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!