{"id":605,"date":"2019-09-30T01:22:56","date_gmt":"2019-09-30T05:22:56","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=605"},"modified":"2019-10-09T16:11:37","modified_gmt":"2019-10-09T20:11:37","slug":"transition-on-hover","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/transition-on-hover\/","title":{"rendered":"Transition on hover"},"content":{"rendered":"<p><strong>What:<\/strong> If you put a transition on the :hover instead of on the :link, it only transitions one way. If you put the transition on the :link, it will transition each way. Usually this is exactly what you want because once you move the cursor off the link, the effect will be gradually transitioned back instead of being removed abruptly.<\/p>\n<hr \/>\n<div class=\"_3bJ2H CHExY\">\n<div class=\"_1l8RX _1ByhS\">Photo by <a href=\"https:\/\/unsplash.com\/@helloimnik?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener noreferrer\">Hello I&#8217;m Nik \ud83c\uddec\ud83c\udde7<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/transition?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener noreferrer\">Unsplash<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What: If you put a transition on the :hover instead of on the :link, it only transitions one way. If you put the transition on the :link, it will transition each way. Usually this is exactly what you want because once you move the cursor off the link, the effect will be gradually transitioned back &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Transition on hover\" class=\"read-more button\" href=\"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/transition-on-hover\/#more-605\" aria-label=\"Read more about Transition on hover\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[32,17,18,70],"class_list":["post-605","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-animation","tag-css","tag-pseudo-elements","tag-transition","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":0,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/605\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}