topic Animating a Box in CMS Development

Animating a Box

Ohhcoconut — Tue, 18 Apr 2017 19:19:21 GMT

Hi world,

I am working on this animated "quote" box to use for my customer testimonials. What I want is a flip on the y axis 180 degrees to show a quote box. I want the front of the box to have an image which i can edit as needed for images of each customer's headshot. My issue is coding this. I'm using custom HTML code. Check out my JSFiddle here. I'm not set on the style yet, definitely not a fan of the font.

Notice the back side, the white background and text overlaps to the outside of the box.

I also cannot figure out how to code the html front side to have an image in the box and be able to change the image as needed for each respective customer headshot.

Any help would be very much appreciated! I've tried to use w3schools and now I'm stuck.

Re: Animating a Box

misterizzo — Wed, 19 Apr 2017 21:39:31 GMT

Hi Ohhcoconut,

I've implemnted stuff like this before.. i just looked for some references I've seen in the past and found this might be helpful for you:

https://davidwalsh.name/css-flip

https://davidwalsh.name/demo/css-flip.php

Here is my JS Fiddle I did quickly.. i think JSFiddle is havving issues loading your image though but it's working a little better maybe?

Re: Animating a Box

Ohhcoconut — Wed, 19 Apr 2017 21:52:04 GMT

Hi Misterizzo,

David Walsh is the template I used to create a flip box, I used his codepen. Take a look at my JSFiddle.

What I want to do is write a code in CSS that I can edit the image per box in the custom html code. Is there a way to do that?

Thank you!

-Colleen

Re: Animating a Box

misterizzo — Wed, 19 Apr 2017 22:04:50 GMT

Oh..

You'll probably need to build a custom module in HubSpot to support this:

I did something similar for background images on landing pages in the past.

If you just customize the CSS file and have that module made, the template should include a flexible column and you'll be able to add in a new module every time you have a new square to add.

The alternative would be to take the HubDB approach (assuming you're using the website package) and have a team members page load with the CSS tricks you're using. The HubDB example for team member pages (luck you) is here.

Here is the code I used with the custom module and fields I built:

{% widget_block raw_html "my_custom_html_module" overrideable=False, label='Custom Background Image or Color Block'  %}

        {% widget_attribute "value" %}
        
            <div class="background-image-custom-module" style="background-image: url('{{ widget.custom_background_image.src }}'); background-color: {{ widget.optional_color_overlay }};" alt="{{ widget.custom_background_image.alt }}">
                <div class="page-center">
                    <div class="rich-text-custom-background">
                        <span>{{ widget.rich_text_copy }}</span>
                    </div>
                </div>
            </div>
        {% end_widget_attribute %}
        
{% end_widget_block %}

And the screen grab of how the widgets were setup:

Re: Animating a Box

Ohhcoconut — Fri, 21 Apr 2017 15:05:45 GMT

Hi Misterizzo,

I ended up calling into hubspot support and they created a module for me. Your description was far too intricate and difficult for me to understand

But thank you for trying.