CMS Development

Ohhcoconut
Contributor

Animating a Box

SOLVE

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. 

0 Upvotes
1 Accepted solution
Ohhcoconut
Solution
Contributor

Animating a Box

SOLVE

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.

 

View solution in original post

0 Upvotes
4 Replies 4
misterizzo
Member

Animating a Box

SOLVE

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?

 

 

0 Upvotes
Ohhcoconut
Contributor

Animating a Box

SOLVE

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

 

 

0 Upvotes
misterizzo
Member

Animating a Box

SOLVE

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:Screen Shot 2017-04-19 at 3.01.47 PM.png

 

 

 

 

 

Ohhcoconut
Solution
Contributor

Animating a Box

SOLVE

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.

 

0 Upvotes