Achieve this effect in Bricks

How To
1

Hi Guys,
Who can help me achieve this effect with Bricks?

Thanks

2

This is a weird question. You can either drop all of it into code blocks… or replicate it (create a layout, apply classes, add settings (e.g. height, display:flex etc.) based on the stylesheet given in the video/codepen.

You literally have a blueprint, so I’m not sure what you need. But because I was curious…here you go…

Here is a layout. Copy this to the clipboard and then ‘paste all’ in Bricks builder structure panel… it’s the layout with classes and styles applied.

{"content":[{"id":"zydwqm","name":"div","parent":0,"children":["buhqgp"],"settings":{"_background":{"color":{"hex":"#000000"}},"_padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"},"_display":"flex","_direction":"column","_alignItems":"center","_height":"100vh","_justifyContent":"center"}},{"id":"buhqgp","name":"div","parent":"zydwqm","children":["jgnbwj","uiichl","qrtgiu","mgdnar","nifgya","uzkath"],"settings":{"_flexWrap":"wrap","_direction":"row","_columnGap":"8px","_rowGap":"8px","_widthMax":"916px","_width":"calc(100% - 20px)","_cssId":"cards","_display":"flex","_cssCustom":"#cards:hover > .card::after {\n  opacity: 1;\n}\n\n.card:hover::before {\n  opacity: 1;\n}\n\n.card::before,\n.card::after {\n  border-radius: inherit;\n  content: \"\";\n  height: 100%;\n  left: 0px;\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  transition: opacity 500ms;\n  width: 100%;\n}\n\n.card::before {\n  background: radial-gradient(\n    800px circle at var(--mouse-x) var(--mouse-y), \n    rgba(255, 255, 255, 0.2),\n    transparent 40%\n  );\n  z-index: 3;\n}\n\n.card::after {  \n  background: radial-gradient(\n    600px circle at var(--mouse-x) var(--mouse-y), \n    rgba(255, 255, 255, 0.4),\n    transparent 40%\n  );\n  z-index: 1;\n}"},"label":"Cards"},{"id":"jgnbwj","name":"div","parent":"buhqgp","children":["jdjdqd"],"settings":{"_cssGlobalClasses":["uexoff"]},"label":"Card"},{"id":"jdjdqd","name":"div","parent":"jgnbwj","children":[],"settings":{"_cssGlobalClasses":["ttdftt"]},"label":"Card Content"},{"id":"uzkath","name":"div","parent":"buhqgp","children":["etrmda"],"settings":{"_cssGlobalClasses":["uexoff"]},"label":"Card"},{"id":"etrmda","name":"div","parent":"uzkath","children":[],"settings":{"_cssGlobalClasses":["ttdftt"]},"label":"Card Content"},{"id":"nifgya","name":"div","parent":"buhqgp","children":["zaiadb"],"settings":{"_cssGlobalClasses":["uexoff"]},"label":"Card"},{"id":"zaiadb","name":"div","parent":"nifgya","children":[],"settings":{"_cssGlobalClasses":["ttdftt"]},"label":"Card Content"},{"id":"mgdnar","name":"div","parent":"buhqgp","children":["jrzrwc"],"settings":{"_cssGlobalClasses":["uexoff"]},"label":"Card"},{"id":"jrzrwc","name":"div","parent":"mgdnar","children":[],"settings":{"_cssGlobalClasses":["ttdftt"]},"label":"Card Content"},{"id":"qrtgiu","name":"div","parent":"buhqgp","children":["wvqxfk"],"settings":{"_cssGlobalClasses":["uexoff"]},"label":"Card"},{"id":"wvqxfk","name":"div","parent":"qrtgiu","children":[],"settings":{"_cssGlobalClasses":["ttdftt"]},"label":"Card Content"},{"id":"uiichl","name":"div","parent":"buhqgp","children":["jyfnuc"],"settings":{"_cssGlobalClasses":["uexoff"]},"label":"Card"},{"id":"jyfnuc","name":"div","parent":"uiichl","children":[],"settings":{"_cssGlobalClasses":["ttdftt"]},"label":"Card Content"}],"source":"bricksCopiedElements","sourceUrl":"https://bricks-blueprint.local","version":"1.8.2","globalClasses":[{"id":"uexoff","name":"card","settings":{"_background":{"color":{"hex":"#ffffff","rgb":"rgba(255, 255, 255, 0.1)","hsl":"hsla(0, 0%, 100%, 0.1)"}},"_border":{"radius":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}},"_display":"flex","_width":"300px","_height":"260px","_direction":"column","_position":"relative","_cursor":"pointer"}},{"id":"ttdftt","name":"card-content","settings":{"_background":{"color":{"hex":"#171717"}},"_border":{"radius":{"top":"inherit","right":"inherit","bottom":"inherit","left":"inherit"}},"_display":"flex","_direction":"column","_flexGrow":"1","_padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"},"_zIndex":"2","_position":"absolute","_top":"1px","_right":"1px","_bottom":"1px","_left":"1px"}}],"globalElements":[]}

Then go to PAGE SETTINGS → CODE and drop this in the CSS…

root:hover > .card::after {
  opacity: 1;
}

.card:hover::before {
  opacity: 1;
}

.card::before,
.card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.2),
    transparent 40%
  );
  z-index: 3;
}

.card::after {  
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.4),
    transparent 40%
  );
  z-index: 1;
}

Then this in the FOOTER SCRIPTS

<script>
document.getElementById("cards").onmousemove = e => {
  for(const card of document.getElementsByClassName("card")) {
    const rect = card.getBoundingClientRect(),
          x = e.clientX - rect.left,
          y = e.clientY - rect.top;

    card.style.setProperty("--mouse-x", `${x}px`);
    card.style.setProperty("--mouse-y", `${y}px`);
  };
}
</script>

You now have almost exactly what the video showed you.

1 Like