{"id":28880,"date":"2018-10-23T14:42:46","date_gmt":"2018-10-23T12:42:46","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=28880"},"modified":"2018-10-23T14:42:46","modified_gmt":"2018-10-23T12:42:46","slug":"having-fun-with-link-hover-effects","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/","title":{"rendered":"Having fun with link hover effects"},"content":{"rendered":"<!-- google_ad_section_start -->\n<p><a href=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"28881\" data-permalink=\"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/css\/\" data-orig-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css.png?fit=900%2C500&amp;ssl=1\" data-orig-size=\"900,500\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"css\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css.png?fit=660%2C367&amp;ssl=1\" class=\"aligncenter size-medium wp-image-28881\" src=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css-500x278.png?resize=500%2C278&#038;ssl=1\" alt=\"\" width=\"500\" height=\"278\" srcset=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css.png?resize=500%2C278&amp;ssl=1 500w, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css.png?resize=768%2C427&amp;ssl=1 768w, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css.png?w=900&amp;ssl=1 900w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Any web developer knows how to apply CSS rules to style web page elements.\u00a0 Including links.\u00a0 Including hover effects (on mouse over).\u00a0 But I think most have never went far enough to explore the limits of this styling.\u00a0 &#8220;<a href=\"https:\/\/css-tricks.com\/having-fun-with-link-hover-effects\/\">Having fun with link hover effects<\/a>&#8221; goes exactly there, with some really cool techniques that tend to leave people with &#8220;why didn&#8217;t I think of that&#8221; thought hovering over their head.<\/p>\n<!-- google_ad_section_end -->\n","protected":false},"excerpt":{"rendered":"<!-- google_ad_section_start -->\n<p>Any web developer knows how to apply CSS rules to style web page elements.\u00a0 Including links.\u00a0 Including hover effects (on mouse over).\u00a0 But I think most have never went far enough to explore the limits of this styling.\u00a0 &#8220;Having fun with link hover effects&#8221; goes exactly there, with some really cool techniques that tend to &hellip; <a href=\"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Having fun with link hover effects<\/span><\/a><\/p>\n<!-- google_ad_section_end -->\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Having fun with link hover effects #WebDev #HTML #CSS #WebDesign","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false,"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[1517,1190,1157,1330],"keyring_services":[],"class_list":["post-28880","post","type-post","status-publish","format-standard","hentry","category-general","category-programming","category-technology","category-web-work","tag-css","tag-html","tag-web-design","tag-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Any web developer knows how to apply CSS rules to style web page elements. Including links. Including hover effects (on mouse over). But I think most have never went far enough to explore the limits of this styling. &quot;Having fun with link hover effects&quot; goes exactly there, with some really cool techniques that tend to\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Leonid Mamchenkov\"\/>\n\t<meta name=\"google-site-verification\" content=\"VHvdD0_usx1_4DzKy_QCVcICVgX2EgA2ybELT-wl7kQ\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Leonid Mamchenkov - Life, universe, and everything else\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Having fun with link hover effects - Leonid Mamchenkov\" \/>\n\t\t<meta property=\"og:description\" content=\"Any web developer knows how to apply CSS rules to style web page elements. Including links. Including hover effects (on mouse over). But I think most have never went far enough to explore the limits of this styling. &quot;Having fun with link hover effects&quot; goes exactly there, with some really cool techniques that tend to\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2018-10-23T12:42:46+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2018-10-23T12:42:46+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MamchenkovBlog\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@mamchenkov\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Having fun with link hover effects - Leonid Mamchenkov\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Any web developer knows how to apply CSS rules to style web page elements. Including links. Including hover effects (on mouse over). But I think most have never went far enough to explore the limits of this styling. &quot;Having fun with link hover effects&quot; goes exactly there, with some really cool techniques that tend to\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@mamchenkov\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#blogposting\",\"name\":\"Having fun with link hover effects - Leonid Mamchenkov\",\"headline\":\"Having fun with link hover effects\",\"author\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/css-500x278.png\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#articleImage\"},\"datePublished\":\"2018-10-23T14:42:46+02:00\",\"dateModified\":\"2018-10-23T14:42:46+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#webpage\"},\"articleSection\":\"All, Programming, Technology, Web work, CSS, HTML, web design, web development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/#listItem\",\"name\":\"Technology\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/#listItem\",\"position\":2,\"name\":\"Technology\",\"item\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/programming\\\/#listItem\",\"name\":\"Programming\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/programming\\\/#listItem\",\"position\":3,\"name\":\"Programming\",\"item\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/programming\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#listItem\",\"name\":\"Having fun with link hover effects\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/#listItem\",\"name\":\"Technology\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#listItem\",\"position\":4,\"name\":\"Having fun with link hover effects\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/programming\\\/#listItem\",\"name\":\"Programming\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#person\",\"name\":\"Leonid Mamchenkov\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3cf6df002a284d78fb6e9d8222ca4d102e0832035ed6bc8447008bd234e131a4?s=96&d=identicon&r=g\",\"width\":96,\"height\":96,\"caption\":\"Leonid Mamchenkov\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/#author\",\"url\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/\",\"name\":\"Leonid Mamchenkov\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3cf6df002a284d78fb6e9d8222ca4d102e0832035ed6bc8447008bd234e131a4?s=96&d=identicon&r=g\",\"width\":96,\"height\":96,\"caption\":\"Leonid Mamchenkov\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#webpage\",\"url\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/\",\"name\":\"Having fun with link hover effects - Leonid Mamchenkov\",\"description\":\"Any web developer knows how to apply CSS rules to style web page elements. Including links. Including hover effects (on mouse over). But I think most have never went far enough to explore the limits of this styling. \\\"Having fun with link hover effects\\\" goes exactly there, with some really cool techniques that tend to\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2018\\\/10\\\/23\\\/having-fun-with-link-hover-effects\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/#author\"},\"datePublished\":\"2018-10-23T14:42:46+02:00\",\"dateModified\":\"2018-10-23T14:42:46+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/\",\"name\":\"Blog of Leonid Mamchenkov\",\"description\":\"Life, universe, and everything else\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Having fun with link hover effects - Leonid Mamchenkov","description":"Any web developer knows how to apply CSS rules to style web page elements. Including links. Including hover effects (on mouse over). But I think most have never went far enough to explore the limits of this styling. \"Having fun with link hover effects\" goes exactly there, with some really cool techniques that tend to","canonical_url":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"VHvdD0_usx1_4DzKy_QCVcICVgX2EgA2ybELT-wl7kQ","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#blogposting","name":"Having fun with link hover effects - Leonid Mamchenkov","headline":"Having fun with link hover effects","author":{"@id":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/#author"},"publisher":{"@id":"https:\/\/mamchenkov.net\/wordpress\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css-500x278.png","@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#articleImage"},"datePublished":"2018-10-23T14:42:46+02:00","dateModified":"2018-10-23T14:42:46+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#webpage"},"isPartOf":{"@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#webpage"},"articleSection":"All, Programming, Technology, Web work, CSS, HTML, web design, web development"},{"@type":"BreadcrumbList","@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress#listItem","position":1,"name":"Home","item":"https:\/\/mamchenkov.net\/wordpress","nextItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/#listItem","name":"Technology"}},{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/#listItem","position":2,"name":"Technology","item":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/","nextItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/#listItem","name":"Programming"},"previousItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/#listItem","position":3,"name":"Programming","item":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/","nextItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#listItem","name":"Having fun with link hover effects"},"previousItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/#listItem","name":"Technology"}},{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#listItem","position":4,"name":"Having fun with link hover effects","previousItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/#listItem","name":"Programming"}}]},{"@type":"Person","@id":"https:\/\/mamchenkov.net\/wordpress\/#person","name":"Leonid Mamchenkov","image":{"@type":"ImageObject","@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/3cf6df002a284d78fb6e9d8222ca4d102e0832035ed6bc8447008bd234e131a4?s=96&d=identicon&r=g","width":96,"height":96,"caption":"Leonid Mamchenkov"}},{"@type":"Person","@id":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/#author","url":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/","name":"Leonid Mamchenkov","image":{"@type":"ImageObject","@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/3cf6df002a284d78fb6e9d8222ca4d102e0832035ed6bc8447008bd234e131a4?s=96&d=identicon&r=g","width":96,"height":96,"caption":"Leonid Mamchenkov"}},{"@type":"WebPage","@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#webpage","url":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/","name":"Having fun with link hover effects - Leonid Mamchenkov","description":"Any web developer knows how to apply CSS rules to style web page elements. Including links. Including hover effects (on mouse over). But I think most have never went far enough to explore the limits of this styling. \"Having fun with link hover effects\" goes exactly there, with some really cool techniques that tend to","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/mamchenkov.net\/wordpress\/#website"},"breadcrumb":{"@id":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/#breadcrumblist"},"author":{"@id":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/#author"},"creator":{"@id":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/#author"},"datePublished":"2018-10-23T14:42:46+02:00","dateModified":"2018-10-23T14:42:46+02:00"},{"@type":"WebSite","@id":"https:\/\/mamchenkov.net\/wordpress\/#website","url":"https:\/\/mamchenkov.net\/wordpress\/","name":"Blog of Leonid Mamchenkov","description":"Life, universe, and everything else","inLanguage":"en-US","publisher":{"@id":"https:\/\/mamchenkov.net\/wordpress\/#person"}}]},"og:locale":"en_US","og:site_name":"Leonid Mamchenkov - Life, universe, and everything else","og:type":"article","og:title":"Having fun with link hover effects - Leonid Mamchenkov","og:description":"Any web developer knows how to apply CSS rules to style web page elements. Including links. Including hover effects (on mouse over). But I think most have never went far enough to explore the limits of this styling. &quot;Having fun with link hover effects&quot; goes exactly there, with some really cool techniques that tend to","og:url":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/","og:image":"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg","og:image:secure_url":"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg","og:image:width":1024,"og:image:height":1024,"article:published_time":"2018-10-23T12:42:46+00:00","article:modified_time":"2018-10-23T12:42:46+00:00","article:publisher":"https:\/\/www.facebook.com\/MamchenkovBlog","twitter:card":"summary_large_image","twitter:site":"@mamchenkov","twitter:title":"Having fun with link hover effects - Leonid Mamchenkov","twitter:description":"Any web developer knows how to apply CSS rules to style web page elements. Including links. Including hover effects (on mouse over). But I think most have never went far enough to explore the limits of this styling. &quot;Having fun with link hover effects&quot; goes exactly there, with some really cool techniques that tend to","twitter:creator":"@mamchenkov","twitter:image":"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg"},"aioseo_meta_data":{"post_id":"28880","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-07-19 16:54:46","updated":"2026-01-15 13:48:46","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/mamchenkov.net\/wordpress\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/\" title=\"Technology\">Technology<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/\" title=\"Programming\">Programming<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHaving fun with link hover effects\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/mamchenkov.net\/wordpress"},{"label":"Technology","link":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/"},{"label":"Programming","link":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/"},{"label":"Having fun with link hover effects","link":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/"}],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":23315,"url":"https:\/\/mamchenkov.net\/wordpress\/2015\/01\/14\/hover-css-collection-of-css3-powered-hover-effects\/","url_meta":{"origin":28880,"position":0},"title":"Hover.css &#8211; collection of CSS3 powered hover effects","author":"Leonid Mamchenkov","date":"January 14, 2015","format":"link","excerpt":"Hover.css - collection of CSS3 powered hover effects","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19137,"url":"https:\/\/mamchenkov.net\/wordpress\/2014\/01\/08\/hover-css-a-collection-of-css3-powered-hover-effects-for-call-to-actions-buttons-logos-and-featured-images\/","url_meta":{"origin":28880,"position":1},"title":"Hover.css &#8211; a collection of CSS3 powered hover effects for call to actions, buttons, logos, and featured images","author":"Leonid Mamchenkov","date":"January 8, 2014","format":"link","excerpt":"Hover.css - a collection of CSS3 powered hover effects for call to actions, buttons, logos, and featured images","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":42617,"url":"https:\/\/mamchenkov.net\/wordpress\/2019\/05\/14\/cssfx-beautifully-simple-click-to-copy-css-effects\/","url_meta":{"origin":28880,"position":2},"title":"CSSFX &#8211; beautifully simple click-to-copy CSS effects","author":"Leonid Mamchenkov","date":"May 14, 2019","format":false,"excerpt":"CSSFX is a collection of CSS effects with previews and very simple implementation instructions. Just click on the effect demo that you like, and a popup with HTML and CSS code snippets will appear, ready to be used on your site. There's also a GitHub repository, if you prefer it\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2019\/05\/cssfx.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2019\/05\/cssfx.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2019\/05\/cssfx.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2019\/05\/cssfx.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2019\/05\/cssfx.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":28339,"url":"https:\/\/mamchenkov.net\/wordpress\/2018\/01\/19\/crooked-style-sheets\/","url_meta":{"origin":28880,"position":3},"title":"Crooked Style Sheets","author":"Leonid Mamchenkov","date":"January 19, 2018","format":false,"excerpt":"Crooked Style Sheets is a proof of concept for\u00a0website tracking\/analytics using only CSS and without Javascript. What can we do with this method? We can gather some basic information about the user, like the screen resolution (when the browser is maximized) and which browser (or engine) is used. Further we\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":27673,"url":"https:\/\/mamchenkov.net\/wordpress\/2017\/06\/08\/lingscars-com-website-of-the-day\/","url_meta":{"origin":28880,"position":4},"title":"LINGsCARS.com &#8211; website of the day","author":"Leonid Mamchenkov","date":"June 8, 2017","format":false,"excerpt":"LINGsCARS.com deserves some kind of title and reward. \u00a0I'm giving it a website of the day award, as I'm still stunned for words. On one hand, it serves as a painful reminder of how the web used to be back in the 90's. \u00a0It got everything from psychedelic background and\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2017\/06\/lingscars-383x500.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":25932,"url":"https:\/\/mamchenkov.net\/wordpress\/2016\/03\/08\/css-hamburgers\/","url_meta":{"origin":28880,"position":5},"title":"CSS Hamburgers","author":"Leonid Mamchenkov","date":"March 8, 2016","format":false,"excerpt":"After spending years and years in close proximity to web and user interface design, I'm still amazed sometimes at a variety of ways to solve even the simplest of problems. \u00a0The growth of the web users on mobile devices has brought us the hamburger icon, which usually hides the collapsed\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"hamburger","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2016\/03\/hamburger.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/28880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/comments?post=28880"}],"version-history":[{"count":0,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/28880\/revisions"}],"wp:attachment":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/media?parent=28880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/categories?post=28880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/tags?post=28880"},{"taxonomy":"keyring_services","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/keyring_services?post=28880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}