{"id":80,"date":"2015-11-12T13:39:47","date_gmt":"2015-11-12T13:39:47","guid":{"rendered":"http:\/\/codemyui.com\/grid-hover-effect\/"},"modified":"2018-05-17T12:51:22","modified_gmt":"2018-05-17T02:51:22","slug":"grid-hover-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/grid-hover-effect\/","title":{"rendered":"Grid Hover Effect"},"content":{"rendered":"<p>Use this snippet to add text to the grid on hover. Designed by\u00a0<a href=\"https:\/\/twitter.com\/hughbalboa\" target=\"_blank\" rel=\"noopener\">Hugh Balboa<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/49b65143183a64b47ea8\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='794' data-theme-id='0' data-slug-hash='PPxqeQ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen #codevember \u2013 Day 9 \u2013 HOVER BOX EFFECT by Hugh Balboa (@hughbalboa) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Use this snippet to add text to the grid on hover. Designed by\u00a0Hugh Balboa.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/grid-hover-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_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":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[18306875,192416248,1512930],"class_list":["post-80","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-grid-layout","tag-hover-animation","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/grid-hover-effect.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":62,"url":"https:\/\/codemyui.com\/content-grid-hover-animation\/","url_meta":{"origin":80,"position":0},"title":"Content Grid Hover Animation","author":"Hima Vincent","date":"December 11, 2015","format":false,"excerpt":"A simple content grid that pops out on hover. Designed by Rudolf van der Ven. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"grid layout\"","block_context":{"text":"grid layout","link":"https:\/\/codemyui.com\/tag\/grid-layout\/"},"img":{"alt_text":"Content Grid Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/content-grid-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/content-grid-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/content-grid-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/content-grid-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24919,"url":"https:\/\/codemyui.com\/colour-changing-grid-hover-animation\/","url_meta":{"origin":80,"position":1},"title":"Colour Changing Grid Hover Animation","author":"Hima Vincent","date":"November 7, 2017","format":false,"excerpt":"A fancy grid layout with hover animation designed by Gennadi Debbaut. It uses the Web Animations API, the origin of the circle is a random set of coordinates inside the box. The circle will always be as small as possible to fully cover the box. If you are having trouble\u2026","rel":"","context":"In \"grid layout\"","block_context":{"text":"grid layout","link":"https:\/\/codemyui.com\/tag\/grid-layout\/"},"img":{"alt_text":"Colour Changing Grid Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Colour-Changing-Grid-Hover-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Colour-Changing-Grid-Hover-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Colour-Changing-Grid-Hover-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Colour-Changing-Grid-Hover-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29534,"url":"https:\/\/codemyui.com\/rainbow-shadow-grid-animation-on-hover\/","url_meta":{"origin":80,"position":2},"title":"Rainbow Shadow Grid Animation on Hover","author":"Saijo George","date":"March 11, 2020","format":false,"excerpt":"Here is a nice rainbow animation as a shadow for a div content. When you hover over it the div pulls in all the shadow elements to form a single card. By Sarah Fossheim. If you are having trouble with the pen, try the archived copy on GitHub Shadow Grid\u2026","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Rainbow Shadow Grid Animation on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/03\/Rainbow-Shadow-Grid-Animation-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/03\/Rainbow-Shadow-Grid-Animation-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/03\/Rainbow-Shadow-Grid-Animation-on-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/03\/Rainbow-Shadow-Grid-Animation-on-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30191,"url":"https:\/\/codemyui.com\/responsive-bookshelf-grid-with-tilt-hover-animation\/","url_meta":{"origin":80,"position":3},"title":"Responsive Bookshelf Grid With Tilt Hover Animation","author":"Hima Vincent","date":"May 18, 2021","format":false,"excerpt":"Code by: Andy Barefoot If you are having trouble with the pen, try the archived copy on GitHub Responsive Bookshelf Grid Snippet","rel":"","context":"In \"book inspired\"","block_context":{"text":"book inspired","link":"https:\/\/codemyui.com\/tag\/css-flip-book\/"},"img":{"alt_text":"Responsive CSS Bookshelf Grid","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Responsive-CSS-Bookshelf-Grid.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Responsive-CSS-Bookshelf-Grid.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Responsive-CSS-Bookshelf-Grid.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Responsive-CSS-Bookshelf-Grid.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24628,"url":"https:\/\/codemyui.com\/image-grid-kenburns-description-hover\/","url_meta":{"origin":80,"position":4},"title":"Image Grid with KenBurns and Description on Hover","author":"Hima Vincent","date":"September 23, 2019","format":false,"excerpt":"This Pure CSS image gallery was designed by Giana, it offers direction aware hover effect by bringing up the description associated with each image and a ken burns effect for the background image. If you are having trouble with the pen, try the archived copy on GitHub Image Grid Snippet","rel":"","context":"In \"direction aware\"","block_context":{"text":"direction aware","link":"https:\/\/codemyui.com\/tag\/direction-aware\/"},"img":{"alt_text":"Image Grid with KenBurns and Description on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":22918,"url":"https:\/\/codemyui.com\/3d-card-flip-hovering-text\/","url_meta":{"origin":80,"position":5},"title":"3D Card Flip With Hovering Text","author":"Hima Vincent","date":"September 20, 2019","format":false,"excerpt":"I am loving this hover effect by Tyrell Rummage, you have a bunch of cards with images in the background and a hovering text that acts as the title for these images. When you hover over them, the image flips to show the content for each card. The way the\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Card Flip With Hovering Text","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"predecessor-version":[{"id":26186,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/80\/revisions\/26186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/603"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}