{"id":2567,"date":"2022-04-22T00:50:55","date_gmt":"2022-04-21T23:50:55","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?p=2567"},"modified":"2022-12-24T15:38:45","modified_gmt":"2022-12-24T15:38:45","slug":"block-editor-mouseover-effects","status":"publish","type":"post","link":"https:\/\/marcosrego.com\/account\/blog\/block-editor-mouseover-effects\/","title":{"rendered":"More than 6 essential mouseover effects for the block editor"},"content":{"rendered":"\n<p>Know how to add mouseover effects such as zoom, ease in-out, font-size and others, when mouse hovering a block on WordPress using Mr.Utils&#8230;<\/p>\n\n\n\n<!--more-->\n\n\n\n<aside class=\"       wp-block-group sidebar has-main-text-color-color has-aside-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<section class=\"    wp-block-group has-main-text-color-color has-main-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"   has-main-text-color-color has-text-color wp-block-heading\"><strong>Did you know?<\/strong><\/h3>\n\n\n\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-1024x538.png\" alt=\"Mr.Utils Opengraph Image\" class=\"wp-image-1029\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n\n\n\n<p class=\"  has-main-text-color-color has-text-color\"><strong><a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">Mr.Utils<\/a><\/strong> can be installed as a <strong>WordPress plugin<\/strong>.<br>Give to the <strong>block editor<\/strong> super-powers such as <strong>pagination or components<\/strong> and apply changes <strong>depending of the device<\/strong>!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=mrutils\"><strong>Get it now (free)<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/section>\n<\/div><\/aside>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><ul class=\"toc_list\"><li><a href=\"#get_mouseover_options_on_the_block_editor\"><span class=\"toc_number toc_depth_1\">1<\/span> Get mouseover options on the block editor<\/a><\/li><li><a href=\"#animations\"><span class=\"toc_number toc_depth_1\">2<\/span> Animations<\/a><ul><li><a href=\"#live_example_using_zoom_animation\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Live example using Zoom animation<\/a><\/li><\/ul><\/li><li><a href=\"#layout_change\"><span class=\"toc_number toc_depth_1\">3<\/span> Layout change<\/a><ul><li><a href=\"#live_example_of_size_change\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Live example of size change<\/a><\/li><\/ul><\/li><li><a href=\"#display_changes\"><span class=\"toc_number toc_depth_1\">4<\/span> Display changes<\/a><ul><li><a href=\"#live_example_of_visibility_change\"><span class=\"toc_number toc_depth_2\">4.1<\/span> Live example of visibility change<\/a><\/li><\/ul><\/li><li><a href=\"#spacing_changes\"><span class=\"toc_number toc_depth_1\">5<\/span> Spacing changes<\/a><ul><li><a href=\"#live_example_of_paddings_change\"><span class=\"toc_number toc_depth_2\">5.1<\/span> Live example of paddings change<\/a><\/li><\/ul><\/li><li><a href=\"#text_size_change\"><span class=\"toc_number toc_depth_1\">6<\/span> Text size change<\/a><ul><li><a href=\"#live_example_of_font-size_change\"><span class=\"toc_number toc_depth_2\">6.1<\/span> Live example of font-size change<\/a><\/li><\/ul><\/li><li><a href=\"#misc_changes\"><span class=\"toc_number toc_depth_1\">7<\/span> Misc. Changes<\/a><ul><li><a href=\"#showing_a_scrollbar_only_when_mouse_hovering_an_element\"><span class=\"toc_number toc_depth_2\">7.1<\/span> Showing a scrollbar only when mouse hovering an element<\/a><\/li><\/ul><\/li><li><a href=\"#comments\"><span class=\"toc_number toc_depth_1\">8<\/span> Comments<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"get_mouseover_options_on_the_block_editor\"><strong>Get mouseover options on the block editor<\/strong><\/span><\/h2>\n\n\n\n<p>One of the cool features of <a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">Mr.Utils<\/a> is the ability to easily install it as a WordPress plugin for free.<\/p>\n\n\n\n<p>When you do so, an interface will appear on the block editor, allowing you to easily use the utility classes of this front-end toolkit.<\/p>\n\n\n\n<p>One type of utility class is the mouse hover state, let&#8217;s focus on that for this post.<\/p>\n\n\n\n<p><em>Note: If you prefer, you can <a href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki#installation\" data-type=\"URL\" data-id=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki#installation\" target=\"_blank\" rel=\"noreferrer noopener\">install Mr.Utils<\/a> without the interface and use the classes on each block Advanced section.<\/em><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"     aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"275\" height=\"714\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/04\/screenshot-4.png\" alt=\"Mr.Utils interface on block editor showing mouseover options\" class=\"wp-image-2572\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/04\/screenshot-4.png 275w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2022\/04\/screenshot-4-116x300.png 116w\" sizes=\"(max-width: 275px) 100vw, 275px\" title=\"-\"><figcaption class=\"wp-element-caption\">Mr.Utils interface on block editor showing mouse hover options<\/figcaption><\/figure><\/div>\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"animations\"><strong>Animations<\/strong><\/span><\/h2>\n\n\n\n<p>On the Animation section of the <em>Hover<\/em> tab (zigzag arrow icon) you will find options such as Fade, Slide, Scale and Zoom.<\/p>\n\n\n\n<p>One thing to keep in mind when selecting one of those options is: By default, the animation will only occur when mouse hovering above the element, nothing will happen when mouse hovering outside the element&#8230; If you want the animation to rollback when you go outside the element, you must go to the <em>Animation<\/em> section of the <em>Global<\/em> tab (first tab) and select the transition type (e.g. Ease In Out).<br>Once you apply a transition globally, the animation will react to both hover situations.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"live_example_using_zoom_animation\"><strong>Live example using <em>Zoom<\/em> animation<\/strong><\/span><\/h3>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<p class=\" mr-hover-zoom mr-active mr-easeinout mr-hover-easeinout  mr-hover-zoom mr-active  mr-easeinout  mr-hover-easeinout  has-text-align-center mr-hover-zoom mr-active mr-easeinout mr-hover-easeinout\"><strong>This paragraph block animates on mouseover!<\/strong><\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"layout_change\"><strong>Layout change<\/strong><\/span><\/h2>\n\n\n\n<p>On the <em>Layout<\/em> section of the <em>Hover<\/em> tab (zigzag arrow icon) you will find options to change the size (width) of a block.<\/p>\n\n\n\n<p>If you want to change the initial size, simply go to the <em>Layout<\/em> section on the <em>Global<\/em> tab (first tab) and find the similar option.<\/p>\n\n\n\n<p>By default, the size will change without any transition\/animation. If you want the block to change the size smoothly, you must go to the <em>Animation<\/em> section of the <em>Global<\/em> tab and select the transition type (e.g. Ease In Out).<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"live_example_of_size_change\"><strong>Live example of size change<\/strong><\/span><\/h3>\n\n\n<div class=\"wp-block-image mr-size11 mr-hover-size13 mr-easeinout\">\n<figure class=\"      alignleft size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1024x768.png\" alt=\"Mr.Dev.&#039;s Theme Screenshot\" class=\"wp-image-2481\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1024x768.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-300x225.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-768x576.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><figcaption class=\"wp-element-caption\">This image will change width on mouseover<\/figcaption><\/figure><\/div>\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"display_changes\"><strong>Display changes<\/strong><\/span><\/h2>\n\n\n\n<p>On the <em>Display <\/em>section of the <em>Hover<\/em> tab (zigzag arrow icon) you will find options to change the visibility type of a block.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Utility-Classes#display\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Utility-Classes#display\" rel=\"noreferrer noopener\">Here you can better understand the differences between the visibility types.<\/a><\/p>\n\n\n\n<p>With these options, you can make a block semi-opaque or totally opaque on mouseover. To do the latter, you must first put the block semi-opaque by default on the <em>Display<\/em> section of the <em>Global<\/em> tab (you can also use the option on the <em>Desktop<\/em> tab [screen icon]).<\/p>\n\n\n\n<p>Just like changing the layout, if you want a smooth transition you must choose the transition type on the <em>Animations <\/em>section (e.g. Ease In Out).<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"live_example_of_visibility_change\"><strong>Live example of visibility change<\/strong><\/span><\/h3>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-nowrap is-layout-flex wp-container-4\">\n<div class=\"   mr-semiopaque mr-hover-opaque  mr-semiopaque  mr-hover-opaque  wp-block-button aligncenter mr-semiopaque mr-hover-opaque\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background wp-element-button\"><strong>This button will become opaque on mouseover!<\/strong><\/a><\/div>\n\n\n\n<div class=\"   mr-easeinout mr-transparent mr-hover-opaque  mr-easeinout  mr-transparent  mr-hover-opaque  wp-block-button aligncenter mr-easeinout mr-transparent mr-hover-opaque\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background wp-element-button\">Hey you found the transparent button also!<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"spacing_changes\"><strong>Spacing changes<\/strong><\/span><\/h2>\n\n\n\n<p>On the <em>Spacing <\/em>section of the <em>Hover<\/em> tab (zigzag arrow icon) you will find options to change the spacing (paddings or\/and margins) of a block.<\/p>\n\n\n\n<p>Just like changing the layout or display, if you want a smooth transition you must choose the transition type on the <em>Animations <\/em>section (e.g. Ease In Out) of the <em>Global<\/em> tab (first tab).<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"live_example_of_paddings_change\"><strong>Live example of paddings change<\/strong><\/span><\/h3>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"   mr-size11 mr-easeinout mr-hover-paddingtop mr-hover-paddingleft mr-marginleft  mr-easeinout  mr-hover-paddingtop  mr-hover-paddingleft  mr-marginleft  wp-block-image size-large mr-size11 mr-easeinout mr-hover-paddingtop mr-hover-paddingleft mr-marginleft\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1024x768.png\" alt=\"Mr.Dev.&#039;s Theme Screenshot\" class=\"wp-image-2481\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-1024x768.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-300x225.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot-768x576.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/11\/screenshot.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><figcaption class=\"wp-element-caption\">A padding-top and padding-left will be added to this image on mouseover<\/figcaption><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"text_size_change\"><strong>Text size change<\/strong><\/span><\/h2>\n\n\n\n<p>On the <em>Text <\/em>section of the <em>Hover<\/em> tab (zigzag arrow icon) you will find options to change the font-size of a block.<\/p>\n\n\n\n<p>Just like changing the layout, display or spacing, if you want a smooth transition you must choose the transition type on the <em>Animations <\/em>section (e.g. Ease In Out) of the <em>Global<\/em> tab (first tab).<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"live_example_of_font-size_change\"><strong>Live example of font-size change<\/strong><\/span><\/h3>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<p class=\"mr-hover-fontsize5 mr-easeinout  mr-easeinout  mr-hover-fontsize5 mr-easeinout\"><strong><em>This paragraph block will have it&#8217;s font-size increased on mouseover!<\/em><\/strong><\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"misc_changes\"><strong>Misc. Changes<\/strong><\/span><\/h2>\n\n\n\n<p>On the <em>Misc. <\/em>section of the <em>Hover<\/em> tab (zigzag arrow icon) you will find some extra options such has:<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"showing_a_scrollbar_only_when_mouse_hovering_an_element\"><strong>Showing a scrollbar only when mouse hovering an element<\/strong><\/span><\/h3>\n\n\n\n<p>There are more than 3 images below. Mouseover to see the scrollbar that will allow you to see all of them!<\/p>\n\n\n\n<figure class=\" mr-hidescroll mr-horizontalscroll mr-hover-scroll  mr-horizontalscroll  mr-hover-scroll  wp-block-gallery has-nested-images columns-default is-cropped mr-hidescroll mr-horizontalscroll mr-hover-scroll wp-block-gallery-5 is-layout-flex\">\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1012\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph.png\" alt=\"Itemzero Open Graph Image\" class=\"wp-image-1012\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1013\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/rydoo-marcosrego-opengraph.png\" alt=\"Rydoo Opengraph Image\" class=\"wp-image-1013\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/rydoo-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/rydoo-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/rydoo-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/rydoo-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1014\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/storylabs-marcosrego-opengraph.png\" alt=\"Storylabs Opengraph Image\" class=\"wp-image-1014\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/storylabs-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/storylabs-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/storylabs-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/storylabs-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1015\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/rubenrdias-marcosrego-opengraph.png\" alt=\"Ruben R. Dias Opengraph Image\" class=\"wp-image-1015\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/rubenrdias-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/rubenrdias-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/rubenrdias-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/03\/rubenrdias-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1016\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/01\/gjp-marcosrego-opengraph.png\" alt=\"GJP Opengraph Image\" class=\"wp-image-1016\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/01\/gjp-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/01\/gjp-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/01\/gjp-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/01\/gjp-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1017\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/openbook-marcosrego-opengraph.png\" alt=\"Openbook Opengraph Image\" class=\"wp-image-1017\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/openbook-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/openbook-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/openbook-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/openbook-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1018\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cookit-marcosrego-opengraph.png\" alt=\"Cookit Opengraph Image\" class=\"wp-image-1018\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cookit-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cookit-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cookit-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cookit-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1019\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/arhcesmo-marcosrego-opengraph.png\" alt=\"Arhcesmo Opengraph Image\" class=\"wp-image-1019\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/arhcesmo-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/arhcesmo-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/arhcesmo-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/arhcesmo-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1020\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/valdorio-marcosrego-opengraph.png\" alt=\"Val do Rio Opengraph Image\" class=\"wp-image-1020\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/valdorio-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/valdorio-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/valdorio-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/valdorio-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1026\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph.png\" alt=\"Mr.Dev.&#039;s Framework Opengraph Image\" class=\"wp-image-1026\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1027\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevwidget-marcosrego-opengraph.png\" alt=\"Mr.Dev.&#039;s Widget Opengraph Image\" class=\"wp-image-1027\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevwidget-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevwidget-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevwidget-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevwidget-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1028\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevmodule-marcosrego-opengraph.png\" alt=\"Mr.Dev.&#039;s Module Opengraph Image\" class=\"wp-image-1028\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevmodule-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevmodule-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevmodule-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevmodule-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1029\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph.png\" alt=\"Mr.Utils Opengraph Image\" class=\"wp-image-1029\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1031\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/editor4roks-marcosrego-opengraph.png\" alt=\"editor4roks Opengraph Image\" class=\"wp-image-1031\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/editor4roks-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/editor4roks-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/editor4roks-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/editor4roks-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1221\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/giftncraft-marcosrego-opengraph.png\" alt=\"Gift &amp; Craft Opengraph Image\" class=\"wp-image-1221\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/giftncraft-marcosrego-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/giftncraft-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/giftncraft-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/giftncraft-marcosrego-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1330\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/emergencia-alimentar-marcosrego-site-opengraph.png\" alt=\"Rede de Emerg\u00eancia Alimentar Open Graph Image\" class=\"wp-image-1330\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/emergencia-alimentar-marcosrego-site-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/emergencia-alimentar-marcosrego-site-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/emergencia-alimentar-marcosrego-site-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/11\/emergencia-alimentar-marcosrego-site-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1838\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cascade-marcosrego-site-opengraph.png\" alt=\"Cascade website Opengraph Image\" class=\"wp-image-1838\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cascade-marcosrego-site-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cascade-marcosrego-site-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cascade-marcosrego-site-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2020\/09\/cascade-marcosrego-site-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1200\" height=\"630\" data-id=\"1813\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph.png\" alt=\"Ressano Garcia Arquitectos Open Graph Image\" class=\"wp-image-1813\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph.png 1200w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph-768x403.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"-\"><\/figure>\n<\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<p>Those were very basic examples, but with some creativity you can use them to make fascinating and useful experiences for your website users \ud83d\ude42<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2><span id=\"comments\"><b>Comments<\/b><\/span><\/h2>\n<div id=\"disqus_thread\"><\/div>\n<script>\nif(mrGetCookie('cookielawinfo-checkbox-functional') == 'yes') {\n    var disqus_config = function () {\n        this.page.url = (location.protocol+'\/\/'+location.host+location.pathname).replace(\"\/account\/\", \"\/\");\n        this.page.identifier = document.querySelector(\"article\").id.replace(\"post-\", \"\");\n    };\n    \n    (function() {\n    var d = document, s = d.createElement('script');\n    s.src = 'https:\/\/marcosrego-web.disqus.com\/embed.js';\n    s.setAttribute('data-timestamp', +new Date());\n    (d.head || d.body).appendChild(s);\n    })();\n} else {\n    document.querySelector('#disqus_thread').innerHTML = 'You cannot view or add comments because you did not consent to the use of functional cookies: <a class=\"  cli_manage_current_consent\" style=\"cursor:pointer;\">Manage your consent.<\/a>';\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Know how to add mouseover effects such as zoom, ease in-out, font-size and others, when mouse hovering a block on WordPress using Mr.Utils&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2624,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[75,35,64,65,23],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2567"}],"collection":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/comments?post=2567"}],"version-history":[{"count":47,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2567\/revisions"}],"predecessor-version":[{"id":2831,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2567\/revisions\/2831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media\/2624"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=2567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/categories?post=2567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/tags?post=2567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}