{"id":1950,"date":"2026-05-27T08:40:30","date_gmt":"2026-05-27T08:40:30","guid":{"rendered":"https:\/\/orkenyi.hu\/?p=1950"},"modified":"2026-05-27T09:15:10","modified_gmt":"2026-05-27T09:15:10","slug":"bricks-builder-hover-effekt","status":"publish","type":"post","link":"https:\/\/orkenyi.hu\/en\/bricks-builder-hover-effekt\/","title":{"rendered":"Modern hover effect in Bricks Builder \u2013 How to create a premium overlay animation step by step"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Introductory<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The most eye-catching elements of modern websites are no longer parallax effects or sliders, but subtle micro-animations. One of my favorites is when you hover your mouse over an image and it appears with an overlay of text, a slightly blurred background, and the image subtly zooms in.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is the detail that instantly makes a website feel more modern and expensive \u2013 even though it&#039;s not technically complicated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article I will show you how to do this in Bricks Builder step by step. You can also see how it looks live: <a href=\"https:\/\/mirellart.hu\">mirellart.hu<\/a> On this page you can see hover effects made using exactly this technique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Video demonstration<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"914\" style=\"aspect-ratio: 1408 \/ 914;\" width=\"1408\" autoplay controls loop muted src=\"https:\/\/orkenyi.hu\/wp-content\/uploads\/2026\/05\/Recording-2026-05-27-102545.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">What are we going to make?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A hover card where:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>by default only the image is visible<\/li>\n\n\n\n<li>An overlay with text appears on hover<\/li>\n\n\n\n<li>the background is slightly blurred (glassmorphism)<\/li>\n\n\n\n<li>the image zooms gently<\/li>\n\n\n\n<li>everything is animated smoothly<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can see the live example here: \ud83d\udc49 <a href=\"https:\/\/mirellart.hu\">mirellart.hu<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The structure<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, let&#039;s build the element structure in Bricks:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Div (parent) \u251c\u2500\u2500 Image \u2514\u2500\u2500 Div (overlay) \u251c\u2500\u2500 Heading \u2514\u2500\u2500 Text<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">THE <code>parent<\/code> will be the box that holds it all together. The image will be at the bottom, and the overlay DIV will sit on top of the image with absolute position.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1 \u2013 Setting up the parent container<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The outermost DIV needs these two settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position:<\/strong> <code>relative<\/code><\/li>\n\n\n\n<li><strong>Overflow:<\/strong> <code>hidden<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>overflow: hidden<\/code> is crucial \u2013 without it, the blur, animation or zooming image may look out of place and messy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2 \u2013 Positioning the Overlay DIV<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The overlay DIV should completely cover the image:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position:<\/strong> <code>absolute<\/code><\/li>\n\n\n\n<li><strong>Top \/ Right \/ Bottom \/ Left:<\/strong> <code>0<\/code><\/li>\n\n\n\n<li><strong>Width \/ Height:<\/strong> <code>100%<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This will ensure that the overlay sits exactly on top of the image and covers it completely when it appears.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3 \u2013 Opacity hover trick<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The overlay should be invisible by default and appear on hover.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Default:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>opacity: 0;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hover state (in Bricks, <code>:hover<\/code> in state):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>opacity: 1;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That&#039;s the basic fade-in. It&#039;s not premium by itself, but it becomes so with the next steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4 \u2013 Smooth transition<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Most hover effects look cheap because everything happens suddenly. The solution is a simple one. <code>transition<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>%root% { transition: all 0.4s ease; }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That&#039;s it. This will make everything much smoother.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> THE <code>0.4s \u2013 0.7s<\/code> transition between gives the most premium feel. Hovering that is too fast gives a cheap look.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5 \u2013 Glassmorphism background<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#039;s where the magic comes in. Add this to the overlay background:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>For dark design:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>For a bright design:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>background: rgba(255,255,255,0.12); backdrop-filter: blur(6px);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This gives it that modern, glassy effect you see on premium agency sites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6 \u2013 Image zoom on hover<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This detail is what separates a mediocre hover effect from a great one. Add the following to the Image element:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>%root% img { transition: transform 0.6s ease; } %root%:hover img { transform: scale(1.06); }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This makes the image come slightly closer when hovered. A small movement, but a huge difference.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why does it work so well?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Because it&#039;s not just one animation, but several small details happening at the same time:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>fade-in on overlay<\/li>\n\n\n\n<li>blur in the background<\/li>\n\n\n\n<li>zoom in on the image<\/li>\n\n\n\n<li>smooth transition throughout<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This combination gives it that premium feel you see on modern websites. A simple fade-in on its own isn\u2019t modern \u2013 it\u2019s the layers that make it so.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I used exactly this solution in <a href=\"https:\/\/mirellart.hu\">mirellart.hu<\/a> also on the page \u2013 it is worth watching live because it says much more than any description.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile optimization<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">One important thing: <strong>no hover on mobile<\/strong>. Therefore:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>or always have the overlay visible on mobile<\/li>\n\n\n\n<li>or appear on click<\/li>\n\n\n\n<li>or use a completely different layout on mobile<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can set responsive behavior separately at breakpoints in Bricks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Summary<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A modern hover effect in Bricks Builder is actually not complicated. The secret is:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>good structure (parent + overlay)<\/li>\n\n\n\n<li>absolute positioning<\/li>\n\n\n\n<li>opacity animation<\/li>\n\n\n\n<li>smooth transition<\/li>\n\n\n\n<li>glass blur background<\/li>\n\n\n\n<li>fine image zoom<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Often it&#039;s these small details that take a website to a completely different level - not complicated features.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#039;re curious what this all looks like in real life:  <strong><a href=\"https:\/\/mirellart.hu\">Check out mirellart.hu<\/a><\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Don&#039;t have the time or inclination to mess around with this?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If you want a modern, premium-looking website for yourself or your business \u2013 built in Bricks Builder, with attention to such small details \u2013 check out <a href=\"https:\/\/mirellart.hu\">mirellart.hu<\/a> reference, <a href=\"https:\/\/orkenyi.hu\/en\/kapcsolat\/\" data-type=\"page\" data-id=\"40\">or send a message and we&#039;ll discuss what you need.<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Bevezet\u0151 A modern weboldalak egyik legl\u00e1tv\u00e1nyosabb eleme ma m\u00e1r nem a parallax vagy a slider, hanem a finom mikroanim\u00e1ci\u00f3k. Az egyik kedvencem: amikor r\u00e1h\u00fazod az egeret egy k\u00e9pre, \u00e9s el\u0151j\u00f6n egy overlay sz\u00f6veggel, enyh\u00e9n blur\u00f6s h\u00e1tt\u00e9rrel, a k\u00e9p pedig finoman zoomol. Ez az a r\u00e9szlet, amit\u0151l egy weboldal azonnal modernebbnek \u00e9s dr\u00e1g\u00e1bbnak \u00e9rz\u0151dik \u2013 pedig [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1952,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Modern hover effekt Bricks Builderben \u2013 Pr\u00e9mium overlay anim\u00e1ci\u00f3 6 l\u00e9p\u00e9sben","_seopress_titles_desc":"Tanuld meg, hogyan k\u00e9sz\u00edts modern, pr\u00e9mium hover effektet Bricks Builderben. Glass overlay, blur, zoom \u00e9s smooth anim\u00e1ci\u00f3 \u2013 l\u00e9p\u00e9sr\u0151l l\u00e9p\u00e9sre, minim\u00e1lis k\u00f3ddal.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":""},"categories":[1],"tags":[],"temakor":[],"class_list":["post-1950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/posts\/1950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/comments?post=1950"}],"version-history":[{"count":3,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/posts\/1950\/revisions"}],"predecessor-version":[{"id":1956,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/posts\/1950\/revisions\/1956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/media\/1952"}],"wp:attachment":[{"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/media?parent=1950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/categories?post=1950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/tags?post=1950"},{"taxonomy":"temakor","embeddable":true,"href":"https:\/\/orkenyi.hu\/en\/wp-json\/wp\/v2\/temakor?post=1950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}