{"id":499,"date":"2012-01-05T14:40:15","date_gmt":"2012-01-05T14:40:15","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=499"},"modified":"2012-01-05T14:40:15","modified_gmt":"2012-01-05T14:40:15","slug":"image-link-enlarge-hover","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/image-link-enlarge-hover\/","title":{"rendered":"Image link &#8211; enlarge on hover"},"content":{"rendered":"<p>If you&#39;re looking to jazz up your site a little bit, you&#39;ve probably explored various CSS tricks, such as changing the opacity of images on hover, underlining text on hover, etc.<\/p>\n<p>But, you may not have considered an image enlargement on hover. This works well on image icons.<\/p>\n<p>If you&#39;re icons are 16px by 16px, you can bump their size a bit during a hover action. The obvious play is to simple adjust the CSS width and height. But, what might not be as obvious is how to reposition the image, so it&#39;s center point doesn&#39;t change.<\/p>\n<p>Essentially, you just need to add a negative margin, equal to 1\/2 the size of the image size increase.<\/p>\n<p><code>a:hover img { width: 18px; height: 18px; margin: -1px; }<br \/>\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#39;re looking to jazz up your site a little bit, you&#39;ve probably explored various CSS tricks, such as changing the opacity of images on&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[90],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/499"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/499\/revisions"}],"predecessor-version":[{"id":500,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/499\/revisions\/500"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}