Hey @jackedwards664. Resolved. I ll write the step by step.
Enable IDs in Bubble:
Go to Settings → General → Expose the option to add an ID attribute to HTML elements.
Add the Group in the Editor:
- Insert a Group that will serve as the element to which the style will be applied.
- Assign an ID to the group, for example,
animated-box.
Add an HTML Element:
Insert an HTML element on the page, anywhere (it doesn’t need to be inside the group).
Add the CSS to the HTML:
Paste the following code into the HTML element:
#animated-box {
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: url("//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
#animated-box::before, #animated-box::after, #animated-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#animated-box::before, #animated-box::after {
content: "";
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
#animated-box::before {
animation-delay: -4s;
}
#animated-box:hover::after, #animated-box:hover::before {
background-color: rgba(255, 0, 0, 0.3);
}
@keyframes clipMe {
0%, 100% {
clip: rect(0px, 220px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
}
html, body {
height: 100%;
}
body {
position: relative;
background-color: #0f222b;
}
*, *::before, *::after {
box-sizing: border-box;
}
( the css editor you inserted above )
In preview:
change the group photo in css: url(“//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png”)
keep me posted if it works or not
Remember, assign an id to your group. and give it a name that you can reference in the css
Bestss
Forum
Academy
Marketplace
Showcase
Pricing
Features
