{"id":26766,"date":"2020-07-28T18:12:18","date_gmt":"2020-07-28T10:12:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26766"},"modified":"2023-04-20T00:32:11","modified_gmt":"2023-04-19T16:32:11","slug":"css-libraries-image-hover-effect","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/","title":{"rendered":"12 CSS Libraries for Beautiful Image Hover Effects"},"content":{"rendered":"<p>Letting users <strong>easily and clearly know which part of the webpage is clickable<\/strong> is an important part of UX design. The old but gold way of doing it was to change the text color and underline it. Nowadays, with CSS, there are plenty more ways to deliver hover effects, particularly to images.<\/p>\n<p>Developers can now <strong>add transition effects or animation when a hover event is triggered<\/strong>. We are looking at directional slides, zooms at different speeds, fade-ins and fade-outs, hinge effects, spotlight reveals, wobbles, bounces and more.<\/p>\n<p>In this compilation, there are <strong>more than 250 hover effects<\/strong> to inspire you. You can also pick up the code at the source.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/visualizing-change-css-transitions-animations\/\" class=\"ref-block__link\" title=\"Read More: How to Use CSS Transitions & Animations to Highlight Changes\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Use CSS Transitions & Animations to Highlight Changes<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/visualizing-change-css-transitions-animations.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-25620 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/visualizing-change-css-transitions-animations.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Use CSS Transitions & Animations to Highlight Changes<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tDesigners and artists have a long history of experimenting with motion, effects, and different kinds of illusions with...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/miketricking\/bootstrap-image-hover\">Image Hover Effects<\/a> <em>(16 effects)<\/em><\/h2>\n<p>In this page you will find a nice collection of 16 hover images effects with captions. Grab the HTML and CSS code for each effect by hovering over the images, then clicking <strong>Show Code<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/image-hover.gif\" width=\"700\" height=\"344\" alt=\"image hover effects\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hasinhayder.github.io\/ImageCaptionHoverAnimation\/\">Image Caption Hover Animation<\/a> <em>(4 effects)<\/em><\/h2>\n<p>Here are 4 cool caption animations that run when one hovers over the image. The effects are built with pure <a href=\"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/\">CSS3 transitions<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/\">transform<\/a>, and no JavaScript, to increase compability across browser.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/ImageCaptionHoverAnimation.gif\" width=\"700\" height=\"347\" alt=\"image hover effects\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gudh.github.io\/ihover\/dist\/\">iHover<\/a> <em>(35 effects)<\/em><\/h2>\n<p>iHover is a collection of hover effects powered by CSS3. There are 20 circle hover effects and 15 square hover effects. To use the effects, you will need to write some HTML markup and include the CSS files.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/ihover.gif\" width=\"700\" height=\"419\" alt=\"image hover effects\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/imagehover.io\/\">Image Hover<\/a> <em>(44 effects)<\/em><\/h2>\n<p>This library contains 44 effects made with pure CSS. Some of the effects include fades, pushes, slides, hinges, reveals, zooms, blurs, flips, folds and shutters, in multiple directions. There is an extended version of 216 effects that can be bought for \u20ac14.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/imagehover.gif\" width=\"700\" height=\"371\" alt=\"image hover effects\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/\">Hover Effect Ideas<\/a> <em>(30 effects)<\/em><\/h2>\n<p>This image hover demo made by Codrop, gives you inspiration when making smooth transitions between images and its captions. There are total 30 effects on two sets with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/codrops\/2014\/06\/19\/ideas-for-subtle-hover-effects\/\">tutorials and the source code<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/hover-effects-ideas.gif\" width=\"700\" height=\"317\" alt=\"image hover effects\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ianlunn.github.io\/Hover\/\">Hover CSS<\/a> <em>(108 effects)<\/em><\/h2>\n<p>Hover CSS lets you add hover effects to any element, such as a button, link or image. The effects include 2D transitions, background transitions, border, Shadow and Glow transitions, and more. The library is available in CSS, Sass, and LESS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/hovercss.gif\" width=\"700\" height=\"365\" alt=\"image hover effects\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/mrsahar\/pen\/PNGMLV\">Animatism<\/a> <em>(100+ effects)<\/em><\/h2>\n<p>There are more than 100 image hover animations to buttons, overlays, details, captions, images and social media buttons. All effects are powered by CSS3.<\/p>\n<p><iframe height=\"380\" scrolling=\"no\" src=\"https:\/\/codepen.io\/mrsahar\/embed\/PNGMLV\/?height=380&theme-id=dark&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/Tutorials\/CaptionHoverEffects\/\">Caption Hover Effect<\/a> <em>(7 effects)<\/em><\/h2>\n<p>There are 7 various effects in this collection. All the transitions look really nice and smooth. Go to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/Tutorials\/CaptionHoverEffects\/index4.html\">tutorial<\/a> section to learn how to apply these effects on your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/caption-hover-effects.gif\" width=\"700\" height=\"507\" alt=\"image hover effects\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/nxworld\/pen\/ZYNOBZ\">CSS Image Hover Effects<\/a> <em>(15 effects)<\/em><\/h2>\n<p>A collection of simple hover effects such as zoom, slide, rotate, gray scale, blur, opacity and other basic effects. You can use these effects by adding the CSS class before your <code>figure<\/code> tag.<\/p>\n<p><iframe height=\"380\" scrolling=\"no\" src=\"https:\/\/codepen.io\/nxworld\/embed\/ZYNOBZ\/?height=380&theme-id=dark&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/noeldelgado\/pen\/pGwFx\">Direction-aware 3D hover effect<\/a><\/h2>\n<p>This is a super cool hover effect that will detect your last mouse movement. The image captions will open from the one of four directions based on your last cursor position.<\/p>\n<p><iframe height=\"380\" scrolling=\"no\" src=\"https:\/\/codepen.io\/noeldelgado\/embed\/pGwFx\/?height=380&theme-id=dark&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/chrisgrabinski\/pen\/gpqtc\">Tiles with Animated Hover<\/a><\/h2>\n<p>One for tile designs, this one features slow zoom, slides, pop-ins, dimmed overlay among others.<\/p>\n<p><iframe height=\"380\" scrolling=\"no\" src=\"https:\/\/codepen.io\/chrisgrabinski\/embed\/gpqtc\/?height=380&theme-id=dark&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/noeldelgado\/pen\/PZJGLx\">SVG clip-Path Hover Effect<\/a><\/h2>\n<p>A super awesome x-ray spotlight image hover effect powered by SVG <code>clip-path<\/code> and CSS transitions. Works fine on Chrome, Opera and Safari.<\/p>\n<p><iframe height=\"380\" scrolling=\"no\" src=\"https:\/\/codepen.io\/noeldelgado\/embed\/PZJGLx\/?height=380&theme-id=dark&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>Letting users easily and clearly know which part of the webpage is clickable is an important part of UX design. The old but gold way of doing it was to change the text color and underline it. Nowadays, with CSS, there are plenty more ways to deliver hover effects, particularly to images. Developers can now&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,4109],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>12 CSS Libraries for Beautiful Image Hover Effects - Hongkiat<\/title>\n<meta name=\"description\" content=\"Letting users easily and clearly know which part of the webpage is clickable is an important part of UX design. The old but gold way of doing it was to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"12 CSS Libraries for Beautiful Image Hover Effects\" \/>\n<meta property=\"og:description\" content=\"Letting users easily and clearly know which part of the webpage is clickable is an important part of UX design. The old but gold way of doing it was to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-28T10:12:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-19T16:32:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/image-hover.gif\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"12 CSS Libraries for Beautiful Image Hover Effects\",\"datePublished\":\"2020-07-28T10:12:18+00:00\",\"dateModified\":\"2023-04-19T16:32:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/\"},\"wordCount\":529,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-libraries-image-hover-effect\\\/image-hover.gif\",\"keywords\":[\"CSS\",\"CSS Frameworks\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/\",\"name\":\"12 CSS Libraries for Beautiful Image Hover Effects - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-libraries-image-hover-effect\\\/image-hover.gif\",\"datePublished\":\"2020-07-28T10:12:18+00:00\",\"dateModified\":\"2023-04-19T16:32:11+00:00\",\"description\":\"Letting users easily and clearly know which part of the webpage is clickable is an important part of UX design. The old but gold way of doing it was to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-libraries-image-hover-effect\\\/image-hover.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-libraries-image-hover-effect\\\/image-hover.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-libraries-image-hover-effect\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"12 CSS Libraries for Beautiful Image Hover Effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"12 CSS Libraries for Beautiful Image Hover Effects - Hongkiat","description":"Letting users easily and clearly know which part of the webpage is clickable is an important part of UX design. The old but gold way of doing it was to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/","og_locale":"en_US","og_type":"article","og_title":"12 CSS Libraries for Beautiful Image Hover Effects","og_description":"Letting users easily and clearly know which part of the webpage is clickable is an important part of UX design. The old but gold way of doing it was to","og_url":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-07-28T10:12:18+00:00","article_modified_time":"2023-04-19T16:32:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/image-hover.gif","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"12 CSS Libraries for Beautiful Image Hover Effects","datePublished":"2020-07-28T10:12:18+00:00","dateModified":"2023-04-19T16:32:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/"},"wordCount":529,"commentCount":8,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/image-hover.gif","keywords":["CSS","CSS Frameworks"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/","url":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/","name":"12 CSS Libraries for Beautiful Image Hover Effects - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/image-hover.gif","datePublished":"2020-07-28T10:12:18+00:00","dateModified":"2023-04-19T16:32:11+00:00","description":"Letting users easily and clearly know which part of the webpage is clickable is an important part of UX design. The old but gold way of doing it was to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/image-hover.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-libraries-image-hover-effect\/image-hover.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-libraries-image-hover-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"12 CSS Libraries for Beautiful Image Hover Effects"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6XI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26766"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26766\/revisions"}],"predecessor-version":[{"id":66612,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26766\/revisions\/66612"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26766"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}