Thumbnail hover

Developer
Robin Brons
Size
3,262 Kb
Views
24,288
  1. Thumbnail hover Previews
  2. Thumbnail hover HTML Codes
  3. Thumbnail hover CSS Codes
  4. Thumbnail hover JS Codes

How do I make an thumbnail hover?

Hover over the thumbnails to see more info :) Can you spot the Miley?. What is a thumbnail hover? How do you make a thumbnail hover? This script and codes were developed by Robin Brons on 16 September 2022, Friday.

Thumbnail hover Previews
IQ Test

Thumbnail hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Thumbnail hover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600);
body { padding: 20px; font-family: 'Open Sans', sans-serif;
}
.wrap { width: 850px; margin: 40px auto; padding: 20px;
}
.thumb { width: 280px; height: 170px; background-color: hsl(0, 0%, 90%); display: inline-block; background-size: cover; position: relative; cursor: pointer; overflow: hidden;
}
.thumb .layer { background-color: hsla(0, 0%, 0%, 0); padding: 10px;
}
.thumb .title { width: calc(100% - 40px); background-color: hsl(0, 0%, 100%); position: absolute; bottom: 10px; padding: 10px;
}
.thumb .title h3 { margin: 0; color: hsl(0, 0%, 20%); font-weight: 600; font-size: 13px;
}
.thumb .info { display: none; transform: translate(0, -20px); color: hsl(0, 0%, 100%); padding: 10px; font-size: 12px; font-weight: 300;
}
.thumb:hover .layer { transition: background-color .1s linear; background-color: hsla(0, 0%, 0%, .7);
}
.thumb:hover .title { width: calc(100% - 20px); background-color: hsla(0, 0%, 0%, 0); position: static;
}
.thumb:hover .title h3 { color: hsl(0, 0%, 100%);
}
.thumb:hover .info { display: block;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrap"> <div class="thumb"> <img src="http://www.denverartmuseum.org/sites/default/files/styles/headline_image/public/collections_main.jpg?itok=VVpOrBkl" alt="" /> <div class="layer"> <div class="title"> <h3>Lorem ipsum dolor sit amet dolor, consectetur adipisicing elit</h3> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga possimus blanditiis dignissimos distinctio ad rerum cumque fugit voluptatum consequatur recusandae incidunt quasi officiis eius dolorem...</p> </div> </div> </div> <div class="thumb"> <img src="http://cdn.hiconsumption.com/wp-content/uploads/2013/08/Miley-Cyrus-Twerking-on-Famous-Paintings-1.gif" alt="" /> <div class="layer"> <div class="title"> <h3>Lorem ipsum dolor sit amet dolor</h3> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga possimus blanditiis dignissimos distinctio ad rerum cumque fugit voluptatum consequatur recusandae incidunt quasi officiis eius dolorem aperiam maxime eum vero ipsa...</p> </div> </div> </div> <div class="thumb"> <img src="http://www.dream-wallpaper.com/free-wallpaper/art-wallpaper/world-famous-paintings-episode-1-wallpaper/1280x800/free-wallpaper-22.jpg" alt="" /> <div class="layer"> <div class="title"> <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eos.</h3> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga possimus blanditiis dignissimos distinctio ad rerum cumque fugit voluptatum consequatur...</p> </div> </div> </div> <div class="thumb"> <img src="http://www.allfamousartists.com/images/famous-paintings.jpg" alt="" /> <div class="layer"> <div class="title"> <h3>Lorem ipsum dolor sit amet dolor</h3> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga possimus blanditiis dignissimos distinctio ad rerum cumque fugit voluptatum consequatur recusandae incidunt quasi officiis eius dolorem aperiam maxime eum vero ipsa...</p> </div> </div> </div> <div class="thumb"> <img src="http://www.dream-wallpaper.com/free-wallpaper/art-wallpaper/world-famous-paintings-episode-2-wallpaper/1920x1200/free-wallpaper-13.jpg" alt="" /> <div class="layer"> <div class="title"> <h3>Lorem ipsum dolor sit amet dolor</h3> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga possimus blanditiis dignissimos distinctio ad rerum cumque fugit voluptatum consequatur recusandae incidunt quasi officiis eius dolorem aperiam maxime eum vero ipsa...</p> </div> </div> </div> <div class="thumb"> <img src="http://framingpainting.com/uploadpic/Rembrandt/big/Rembrandt%20night%20watch.jpg" alt="" /> <div class="layer"> <div class="title"> <h3>Lorem ipsum dolor sit amet dolor</h3> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga possimus blanditiis dignissimos distinctio ad rerum cumque fugit voluptatum consequatur recusandae incidunt quasi officiis eius dolorem aperiam maxime eum vero ipsa...</p> </div> </div> </div> <div class="thumb"> <img src="http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/wallpapers-fine-art-painting.jpg" alt="" /> <div class="layer"> <div class="title"> <h3>Lorem ipsum dolor sit amet dolor</h3> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga possimus blanditiis dignissimos distinctio ad rerum cumque fugit voluptatum consequatur recusandae incidunt quasi officiis eius dolorem aperiam maxime eum vero ipsa...</p> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Thumbnail hover - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600);
body { padding: 20px; font-family: 'Open Sans', sans-serif;
}
.wrap { width: 850px; margin: 40px auto; padding: 20px;
}
.thumb { width: 280px; height: 170px; background-color: hsl(0, 0%, 90%); display: inline-block; background-size: cover; position: relative; cursor: pointer; overflow: hidden;
}
.thumb .layer { background-color: hsla(0, 0%, 0%, 0); padding: 10px;
}
.thumb .title { width: calc(100% - 40px); background-color: hsl(0, 0%, 100%); position: absolute; bottom: 10px; padding: 10px;
}
.thumb .title h3 { margin: 0; color: hsl(0, 0%, 20%); font-weight: 600; font-size: 13px;
}
.thumb .info { display: none; transform: translate(0, -20px); color: hsl(0, 0%, 100%); padding: 10px; font-size: 12px; font-weight: 300;
}
.thumb:hover .layer { transition: background-color .1s linear; background-color: hsla(0, 0%, 0%, .7);
}
.thumb:hover .title { width: calc(100% - 20px); background-color: hsla(0, 0%, 0%, 0); position: static;
}
.thumb:hover .title h3 { color: hsl(0, 0%, 100%);
}
.thumb:hover .info { display: block;
}

Thumbnail hover - Script Codes JS Codes

$("div.thumb").each(function() { var el = $(this); var url = el.find("img").hide().attr("src"); el.css("background-image", "url(" + url + ")");
});
Thumbnail hover - Script Codes
Thumbnail hover - Script Codes
Home Page Home
Developer Robin Brons
Username bronsrobin
Uploaded September 16, 2022
Rating 3.5
Size 3,262 Kb
Views 24,288
Do you need developer help for Thumbnail hover?

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!

Robin Brons (bronsrobin) Script Codes
Name
CSS Price Table
Price Tags
Doggie
A Pen by Robin Brons
Chrome Cast Loader
Responsive forum
Responsive Menu
Form Progress
Pure CSS Image Slider
Raaawr Dinosaur
Create amazing captions 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!