Jewel Theme

Liton Arefin

<p><a href="https://master-addons.com/demos/image-hover-effects/" rel="nofollow ugc">Image hover effects for Elementor</a> is a standalone plugin for Elementor Page Builder. It contains some free and pro effects. All the effects are fully responsive on all devices + hover effects are touch enabled too.</p>
<h4>Features of the plugin</h4>
<ul>
<li>Fully Responsive</li>
<li>30+ Hover Effects (Including pro)</li>
<li>Title, Description, Social Media content</li>
<li>Image Upload from media</li>
<li>Border , Border Radius, Padding, Margin options</li>
<li>Typography, color settings available</li>
<li>Easy to Use</li>
</ul>
<p>To use “Image Hover Effects for Elementor” you will have to activate Elementor plugin. We’ve given options also if you don’t have Installed Elementor Plugin.</p>
<p>Here is the Download link for <a href="https://wordpress.org/plugins/elementor/" rel="ugc">Elementor</a> WordPress Plugin.</p>
<h3>Common Problems with Solutions:</h3>
<p>Elementor not loading problem<br />
– There are various reasons for Elementor not loading issue. For more details please check the Tutorial below.<br />
Increasing PHP Memory limit from wp-config.php or php.ini file is simplest solutions. But there are others too –<br />
<a href="https://master-addons.com/elementor-editor-not-loading-issue/" rel="nofollow ugc">View Tutorial</a></p>
<h3>Liked Image Hover Effects for Elementor?</h3>
<p>Rate us on <a href="https://wordpress.org/support/plugin/master-image-feed-for-elementor/reviews/#new-post" rel="ugc">WordPress Forum 🙂</a></p>
<h3>Support</h3>
<p>Join our <a href="https://www.facebook.com/groups/2495256720521297/" rel="nofollow ugc">Master Addons Community</a><br />
Learn from our Tutorials on <a href="https://www.youtube.com/channel/UCAPfTXvzbNebKsB322Iz6HQ" rel="nofollow ugc">Youtube Channel</a><br />
Like on our <a href="https://www.facebook.com/masteraddons/" rel="nofollow ugc">Facebook Fan Page</a><br />
Get Faster Support from Website <a href="https://master-addons.com/contact-us/" rel="nofollow ugc">Website Contact Form</a></p>
<h3>Support</h3>
<p><a href="https://jeweltheme.com/contact/" rel="nofollow ugc">Support Forum</a><br />
<a href="https://jeweltheme.com/contact/" rel="nofollow ugc">Pre-Sale Questions</a></p>
<h3>✋Want More –</h3>
<p>If you like our image-hover-effects-elementor-addon plugin then why not check some other plugins that developed by us:</p>
<p>🚀 <a href="https://wordpress.org/plugins/adminify/" rel="ugc">WP Adminify:</a> – The best WordPress Dashboard Customization plugin available in the market. With this plugin you will get 18+ modules like Dark Mode, Menu Editor, Folders, Dashboard Widget Manager, Login Customizer, Admin Columns, Activity Logs and many more.</p>
<p>🚀 <a href="https://wordpress.org/plugins/ultimate-blocks-for-gutenberg/" rel="ugc">Master Blocks:</a> – “Master Blocks” is a powerful WordPress plugin designed to enhance the functionality of the Gutenberg block editor. With this plugin, users can unlock a wide range of new blocks, offering greater flexibility and creativity when designing and customising their website’s content.</p>
<p>🚀 <a href="https://wordpress.org/plugins/master-addons/" rel="ugc">Master Addons:</a> – One of the best Elementor Addon plugin that packed with 70+ elements and extensions. You will get all essential elements to design any type Website.</p>
<p>🚴🏻‍♂️ <a href="https://wordpress.org/plugins/image-comparison-elementor-addon/" rel="ugc">Image Comparison for Elementor:</a> – This plugin dedicatedly made for image comparison element. You will get a multiple variation for image comparison. Showcase your before after work easily with the help of this plugin.</p>
<p>🍡 <a href="https://wordpress.org/plugins/wp-awesome-faq/" rel="ugc">Master Accordion:</a> – If you are a default WordPress user and need a proper accordion plugin then Master Accordion is for you. You can add as much accordion as you need in multiple way.</p>
<p>🏕 <a href="https://wordpress.org/plugins/prettyphoto/" rel="ugc">WordPress prettyPhoto:</a> – This plugin helps you to enable lightbox for your any media file, flash, YouTube, iframes and ajax. Just enable PreetyPhoto in your desired media file and you are done.</p>


Image Hover Effects for Elementor

Image hover effects for Elementor will help you to showcase images with hover title, & description. Select best hover effects from the list.

Phi Phan

<p><strong>Block Enhancements</strong> adds powerful design options to core Gutenberg blocks, so you don’t need to install heavy custom block libraries.<br />
It’s the easiest way to make your existing blocks more flexible and responsive while keeping your site fast and clean. All dynamic styles are rendered in the document head instead of inline styles. If you deactivate the plugin, all customized styles are removed, and no leftover styles will affect your site.<br />
Unlike other similar plugins, this plugin is lightweight. It only loads what you need. You can enable or disable individual features per block type from the plugin’s settings page.</p>
<p><em>It works with all Gutenberg-ready themes, however, the with-icon feature uses the CSS pseudo <code>::before</code> to add icons with the <code>mask-image</code> CSS property. It may conflict with other plugins or themes that use the same technique.</em></p>
<h3>Key Features</h3>
<ul>
<li>Add icons to buttons, headings, lists, navigation blocks (built-in 3000+ icon library or custom SVGs).</li>
<li>Set responsive dimensions: padding, margin, and block spacing per device.</li>
<li>Adjust responsive typography: font size, weight, line height, letter spacing per device.</li>
<li>Apply 2D transforms (translate, rotate, skew, scale) per device with hover styles.</li>
<li>Add box-shadow and text-shadow with hover state styles.</li>
<li>Customize text and background colors with hover styles.</li>
<li>Control responsive text alignment for Group, Columns, and Column blocks.</li>
<li>Use transitions for smooth hover style changes.</li>
<li>Define responsive CSS positions (relative, absolute, sticky, static) with custom offsets.</li>
</ul>
<h3>How responsive styles work</h3>
<p>Responsive styles are applied per device mode: Desktop, Tablet, and Mobile. When you edit a style for a block for the first time, the current device mode becomes the source, and the other modes will automatically inherit those styles.</p>
<p>For example, if you set styles in Desktop mode first, Tablet and Mobile will inherit the Desktop styles by default. If you want different styles for Tablet or Mobile, switch to that mode and adjust the settings there. The same behavior applies if you start editing in Tablet or Mobile mode. Each device mode can be customized independently once it has been edited.</p>
<p>By default, the breakpoints are:</p>
<ul>
<li>Desktop: 1024px</li>
<li>Tablet: 768px</li>
</ul>
<p>If your theme or another plugin uses different breakpoints, you can change the defaults using the following filter:</p>
<pre><code>    apply_filters( 'block_enhancements_get_breakpoints', [
      'sm' => [
        'breakpoint' => '576px',
        'mediaQuery' => '',
      ],
      'md' => [
        'breakpoint' => '768px',
        'mediaQuery' => '@media (min-width: 768px){##CONTENT##}',
      ],
      'lg' => [
        'breakpoint' => '1024px',
        'mediaQuery' => '@media (min-width: 1024px){##CONTENT##}',
      ],
    ] );
</code></pre>
<p>This allows you to align responsive behavior with your theme’s breakpoint system.</p>
<h3>Common use cases</h3>
<ol>
<li>Add icons to blocks (button, heading, list, navigation).</li>
<li>Change spacing (padding, margin, block spacing) for button, group, row, grid, columns, gallery blocks per device.</li>
<li>Change typography (font size, font weight, line-height, letter spacing) per device.</li>
<li>Change text-alignment for group blocks per device. For example text-align center on mobile but text-align left on the desktop.</li>
<li>Add 2D transforms with hover styles.</li>
<li>Add box-shadow, text-shadow with hover styles.</li>
<li>Change text color, background color on mouse hover.</li>
</ol>
<h3>How to use a feature</h3>
<ol>
<li>Select the block in the Block Editor.</li>
<li>Choose the style tab from the inspector settings.</li>
<li>Click on the plus (+) icon of the Block Enhancements panel to choose the feature and input your settings.</li>
<li>If the feature does not show up, go to the setting page (Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Block Enhancements) to add the feature to your block type.</li>
<li>To input settings for responsive features, you have to switch to between device mode (Desktop/Tablet/Mobile).</li>
<li>The responsive text alignment settings is on the block toolbar not in the inspector settings.</li>
<li>See the video tutorials and the screenshots for more details.</li>
</ol>
<h3>Video tutorials</h3>
<p>How to customize a core button in Gutenberg:</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/uW3xEH6U-C0?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>Please help this plugin grow by reporting issues and giving suggestions.</p>
<p>If this plugin is useful for you, please do a quick review and <a href="https://wordpress.org/support/plugin/block-enhancements/reviews/#new-post" rel="ugc">rate it</a> on WordPress.org to help us spread the word. I would very much appreciate it.</p>
<p>Please check out my other plugins if you’re interested:</p>
<ul>
<li><strong><a href="https://wordpress.org/plugins/content-blocks-builder" rel="ugc">Content Blocks Builder</a></strong> – Build custom layouts and blocks visually in the Block Editor without needing a code editor, using only core blocks and native Gutenberg features.</li>
<li><strong><a href="https://wordpress.org/plugins/display-a-meta-field-as-block" rel="ugc">Meta Field Block</a></strong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.</li>
<li><strong><a href="https://wordpress.org/plugins/svg-block" rel="ugc">SVG Block</a></strong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.</li>
<li><strong><a href="https://wordpress.org/plugins/icon-separator" rel="ugc">Icon separator</a></strong> – A tiny block just like the core/separator block but with the ability to add an icon.</li>
<li><strong><a href="https://wordpress.org/plugins/breadcrumb-block" rel="ugc">Breadcrumb Block</a></strong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.</li>
<li><strong><a href="https://wordpress.org/plugins/counting-number-block" rel="ugc">Counting Number Block</a></strong> – A block to display numbers with a counting effect</li>
<li><strong><a href="https://wordpress.org/plugins/better-youtube-embed-block" rel="ugc">Better YouTube Embed Block</a></strong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.</li>
</ul>
<p>The plugin is developed using @wordpress/scripts. The source code is available in the trunk branch.</p>


Block Enhancements – Extended styling for the Block Editor

Add icon, responsive spacing, typography, alignment, shadow, transform, transition, color, hover style to blocks. Lightweight, fast, and clean.

Image Hover Effects for Elementor vs Block Enhancements – Extended styling for the Block Editor