{"id":317,"date":"2026-01-12T13:04:19","date_gmt":"2026-01-12T13:04:19","guid":{"rendered":"https:\/\/nguyenlan.com\/enable-image-hover\/"},"modified":"2026-01-19T16:19:02","modified_gmt":"2026-01-19T16:19:02","slug":"enable-image-hover","status":"publish","type":"post","link":"https:\/\/nguyenlan.com\/en\/enable-image-hover\/","title":{"rendered":"Enable Image Hover"},"content":{"rendered":"<p>The Image element in Flatsome\u2019s UX Builder already provides many powerful options. However, during interface design, when you need to hover over an image to display another image to enhance user experience (UX), the current default functionality does not support this directly.<\/p>\n<p>Normally, to achieve this effect, you have to:<\/p>\n<ul>\n<li>Use <strong>two separate Image elements<\/strong><\/li>\n<li>Combine them with <strong>custom CSS<\/strong> to handle the hover effect<\/li>\n<\/ul>\n<p>This approach is not too difficult for developers, but it can be <strong>complicated and hard to access<\/strong> for users who are not familiar with coding.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-225 size-full\" src=\"https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-1.webp\" alt=\"\" width=\"1691\" height=\"873\" srcset=\"https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-1.webp 1691w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-1-300x155.webp 300w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-1-1024x529.webp 1024w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-1-768x396.webp 768w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-1-1536x793.webp 1536w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-1-600x310.webp 600w\" sizes=\"auto, (max-width: 1691px) 100vw, 1691px\" \/> <\/p>\n<h3>Solution: Enable Image Hover<\/h3>\n<p><strong>Enable Image Hover<\/strong> is a feature developed by <strong>Nguyen Lan<\/strong> to <strong>add hover image functionality directly to the existing Image element<\/strong>, allowing you to:<\/p>\n<ul>\n<li>Add <strong>one hover image<\/strong> directly to the Image element you are using<\/li>\n<li>Apply <strong>15 different hover effects<\/strong><\/li>\n<li>No need to write CSS<\/li>\n<li>No need to recreate elements<\/li>\n<\/ul>\n<p>https:\/\/www.youtube.com\/watch?v=dmKbvDThBBw[\/embed<br \/>\n]\n<h3>How to use<\/h3>\n<p>To enable this feature, simply:<\/p>\n<ol>\n<li>Open <strong>UX Builder<\/strong><\/li>\n<li>Go to <strong>Advanced Utilities<\/strong><\/li>\n<li>Navigate to <strong>Image<\/strong><\/li>\n<li>Enable <strong>Enable Image Hover<\/strong><\/li>\n<\/ol>\n<p> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-226\" src=\"https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-2.webp\" alt=\"\" width=\"1731\" height=\"789\" srcset=\"https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-2.webp 1731w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-2-300x137.webp 300w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-2-1024x467.webp 1024w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-2-768x350.webp 768w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-2-1536x700.webp 1536w, https:\/\/nguyenlan.com\/wp-content\/uploads\/2026\/01\/image-hover-show-image-2-600x273.webp 600w\" sizes=\"auto, (max-width: 1731px) 100vw, 1731px\" \/><\/p>\n<p>Immediately, in the <strong>Image element<\/strong> you are using, you will see:<\/p>\n<ul>\n<li>A field to <strong>upload the hover image<\/strong><\/li>\n<li>A list of <strong>hover effects<\/strong> to choose from<\/li>\n<\/ul>\n<h3>No override \u2013 Instant application<\/h3>\n<p>Enable Image Hover <strong>does not override Flatsome\u2019s shortcode<\/strong>. Therefore:<\/p>\n<ul>\n<li>The feature is <strong>applied instantly<\/strong><\/li>\n<li>Works with <strong>all Image elements previously designed<\/strong><\/li>\n<li><strong>No need to edit or recreate layouts<\/strong><\/li>\n<\/ul>\n<p>\ud83d\udc49 This is an optimal solution to <strong>enhance UX, save design time<\/strong>, and keep your interface professional while remaining simple to use.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Image element in Flatsome\u2019s UX Builder already provides many powerful options. However, during interface design, when you need to hover over an image to display another image to enhance user experience (UX), the current default functionality does not support this directly. Normally, to achieve this effect, you have to: Use two separate Image elements<\/p>\n","protected":false},"author":1,"featured_media":313,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"class_list":["post-317","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced-uxbuilder-for-flatsome"],"_links":{"self":[{"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/posts\/317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/comments?post=317"}],"version-history":[{"count":2,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/posts\/317\/revisions"}],"predecessor-version":[{"id":856,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/posts\/317\/revisions\/856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/media\/313"}],"wp:attachment":[{"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/media?parent=317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/categories?post=317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguyenlan.com\/en\/wp-json\/wp\/v2\/tags?post=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}