Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                

<div class="card-wrapper">
  

  <div class="normal-text">
    
<svg class="bg-svg bottom-bg" width="400px" height="76px" viewBox="0 0 400 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.526947464">
        <g id="Artboard" fill="#1E1F44">
            <path d="M5.95114601e-15,75.999998 C120.856212,76.0113361 277.782729,28.7187605 400,28.0990414 L400,2.98181778 C400,1.33500529 398.209139,2.84217094e-14 396,2.84217094e-14 L4,2.84217094e-14 C1.790861,2.84217094e-14 2.705415e-16,1.33500529 0,2.98181778 L5.95114601e-15,75.999998 Z" id="Rectangle-10"></path>
        </g>
    </g>
</svg>
    <div class="text-content">
      <p>WordPress</p>
    </div>
  </div>
  
  <div class="platform-icon large">
    
<svg width="101px" height="101px" viewBox="0 0 101 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy-2" transform="translate(-599.000000, -2037.000000)" fill="#FFFFFF">
            <g id="Group-17" transform="translate(17.000000, 186.000000)">
                <g id="Page-1-Copy" transform="translate(582.000000, 1851.000000)">
                    <g id="Group-4">
                        <path d="M7,50.6686455 C7,67.8528057 16.9583477,82.7037867 31.3988764,89.741573 L10.7482499,33 C8.3465036,38.3988816 7,44.3738138 7,50.6686455" id="Fill-16"></path>
                        <path d="M78.2435843,48.0497838 C78.2435843,42.706906 76.326012,39.0064812 74.6817196,36.1267058 C72.4931733,32.5659415 70.4395375,29.5499684 70.4395375,25.9892041 C70.4395375,22.0140753 73.451383,18.3148047 77.692412,18.3148047 C77.8838233,18.3148047 78.06601,18.3390433 78.252809,18.3494313 C70.5686825,11.3017726 60.3316364,7 49.0867982,7 C33.9975906,7 20.7221782,14.7482693 13,26.4855181 C14.0135575,26.516682 14.9683079,26.5374579 15.7789233,26.5374579 C20.2966916,26.5374579 27.290123,25.9892041 27.290123,25.9892041 C29.618192,25.8518521 29.8926251,29.2741101 27.5668623,29.5499684 C27.5668623,29.5499684 25.2261094,29.8258266 22.6236074,29.9620244 L38.3516215,76.7921348 L47.804573,48.4168253 L41.0751969,29.9620244 C38.7494341,29.8258266 36.5458979,29.5499684 36.5458979,29.5499684 C34.2178289,29.4137706 34.4911089,25.8518521 36.8180248,25.9892041 C36.8180248,25.9892041 43.950979,26.5374579 48.1943141,26.5374579 C52.7109293,26.5374579 59.7055138,25.9892041 59.7055138,25.9892041 C62.0347359,25.8518521 62.3091689,29.2741101 59.9822531,29.5499684 C59.9822531,29.5499684 57.638041,29.8258266 55.0389982,29.9620244 L70.6470919,76.4366355 L74.9549996,62.0262165 C76.8229895,56.0462101 78.2435843,51.7513628 78.2435843,48.0497838" id="Fill-18"></path>
                        <path d="M50.0197248,54 L37,91.9459581 C40.8869173,93.0928075 44.9985923,93.7191011 49.258561,93.7191011 C54.3109742,93.7191011 59.158325,92.8429872 63.6685393,91.2522711 C63.5526849,91.0651963 63.4472573,90.867664 63.3603664,90.6527024 L50.0197248,54 Z" id="Fill-20"></path>
                        <path d="M88.2494875,29 C88.4358641,30.3713862 88.5412073,31.8439307 88.5412073,33.4279795 C88.5412073,37.7961835 87.7192984,42.708114 85.2443105,48.8500388 L72,86.8764045 C84.891237,79.4113737 93.5617978,65.5423259 93.5617978,49.6581565 C93.5617978,42.1724342 91.6366786,35.1327286 88.2494875,29" id="Fill-22"></path>
                        <path d="M50.3947508,98.478843 C23.8810386,98.478843 2.31065871,76.908463 2.31065871,50.3935967 C2.31065871,23.8798844 23.8810386,2.31065871 50.3947508,2.31065871 C76.9073089,2.31065871 98.4765346,23.8798844 98.4765346,50.3935967 C98.4765346,76.908463 76.9073089,98.478843 50.3947508,98.478843 M50.3947508,0 C22.6079834,0 0,22.6068292 0,50.3935967 C0,78.1838266 22.6079834,100.789502 50.3947508,100.789502 C78.1803641,100.789502 100.79181,78.1838266 100.79181,50.3935967 C100.79181,22.6068292 78.1803641,0 50.3947508,0" id="Fill-24"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
  
  <div class="platform-icon small">
    
<svg width="101px" height="101px" viewBox="0 0 101 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy-2" transform="translate(-599.000000, -2037.000000)" fill="#FFFFFF">
            <g id="Group-17" transform="translate(17.000000, 186.000000)">
                <g id="Page-1-Copy" transform="translate(582.000000, 1851.000000)">
                    <g id="Group-4">
                        <path d="M7,50.6686455 C7,67.8528057 16.9583477,82.7037867 31.3988764,89.741573 L10.7482499,33 C8.3465036,38.3988816 7,44.3738138 7,50.6686455" id="Fill-16"></path>
                        <path d="M78.2435843,48.0497838 C78.2435843,42.706906 76.326012,39.0064812 74.6817196,36.1267058 C72.4931733,32.5659415 70.4395375,29.5499684 70.4395375,25.9892041 C70.4395375,22.0140753 73.451383,18.3148047 77.692412,18.3148047 C77.8838233,18.3148047 78.06601,18.3390433 78.252809,18.3494313 C70.5686825,11.3017726 60.3316364,7 49.0867982,7 C33.9975906,7 20.7221782,14.7482693 13,26.4855181 C14.0135575,26.516682 14.9683079,26.5374579 15.7789233,26.5374579 C20.2966916,26.5374579 27.290123,25.9892041 27.290123,25.9892041 C29.618192,25.8518521 29.8926251,29.2741101 27.5668623,29.5499684 C27.5668623,29.5499684 25.2261094,29.8258266 22.6236074,29.9620244 L38.3516215,76.7921348 L47.804573,48.4168253 L41.0751969,29.9620244 C38.7494341,29.8258266 36.5458979,29.5499684 36.5458979,29.5499684 C34.2178289,29.4137706 34.4911089,25.8518521 36.8180248,25.9892041 C36.8180248,25.9892041 43.950979,26.5374579 48.1943141,26.5374579 C52.7109293,26.5374579 59.7055138,25.9892041 59.7055138,25.9892041 C62.0347359,25.8518521 62.3091689,29.2741101 59.9822531,29.5499684 C59.9822531,29.5499684 57.638041,29.8258266 55.0389982,29.9620244 L70.6470919,76.4366355 L74.9549996,62.0262165 C76.8229895,56.0462101 78.2435843,51.7513628 78.2435843,48.0497838" id="Fill-18"></path>
                        <path d="M50.0197248,54 L37,91.9459581 C40.8869173,93.0928075 44.9985923,93.7191011 49.258561,93.7191011 C54.3109742,93.7191011 59.158325,92.8429872 63.6685393,91.2522711 C63.5526849,91.0651963 63.4472573,90.867664 63.3603664,90.6527024 L50.0197248,54 Z" id="Fill-20"></path>
                        <path d="M88.2494875,29 C88.4358641,30.3713862 88.5412073,31.8439307 88.5412073,33.4279795 C88.5412073,37.7961835 87.7192984,42.708114 85.2443105,48.8500388 L72,86.8764045 C84.891237,79.4113737 93.5617978,65.5423259 93.5617978,49.6581565 C93.5617978,42.1724342 91.6366786,35.1327286 88.2494875,29" id="Fill-22"></path>
                        <path d="M50.3947508,98.478843 C23.8810386,98.478843 2.31065871,76.908463 2.31065871,50.3935967 C2.31065871,23.8798844 23.8810386,2.31065871 50.3947508,2.31065871 C76.9073089,2.31065871 98.4765346,23.8798844 98.4765346,50.3935967 C98.4765346,76.908463 76.9073089,98.478843 50.3947508,98.478843 M50.3947508,0 C22.6079834,0 0,22.6068292 0,50.3935967 C0,78.1838266 22.6079834,100.789502 50.3947508,100.789502 C78.1803641,100.789502 100.79181,78.1838266 100.79181,50.3935967 C100.79181,22.6068292 78.1803641,0 50.3947508,0" id="Fill-24"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
  
  <div class="hover-text">
    <div class="text-content">
      <h3>AddThis + WordPress</h3>
      <a href="#" class="button button-l1"><span>Install</span></a>
      <a href="#" class="button"><span>Learn More</span></a>
    </div>
  
<svg class="bg-svg top-bg" width="400px" height="446px" viewBox="0 0 400 446" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(0.000000, -1146.000000)" fill="#FFFFFF">
            <path d="M1.97372982e-15,1146 C109.843736,1145.98385 288.919226,1213.37769 400,1214.26081 L400,1592 L400,1592 C400,1593.65685 398.656854,1595 397,1595 L3,1595 L3,1595 C1.34314575,1595 3.00655663e-14,1593.65685 -1.77635684e-15,1592 L1.97372982e-15,1146 Z" id="Rectangle-10"></path>
        </g>
    </g>
</svg>
  </div>

</div>
<div class="card-wrapper orange">
  

  <div class="normal-text">
    
<svg class="bg-svg bottom-bg" width="400px" height="76px" viewBox="0 0 400 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.526947464">
        <g id="Artboard" fill="#1E1F44">
            <path d="M5.95114601e-15,75.999998 C120.856212,76.0113361 277.782729,28.7187605 400,28.0990414 L400,2.98181778 C400,1.33500529 398.209139,2.84217094e-14 396,2.84217094e-14 L4,2.84217094e-14 C1.790861,2.84217094e-14 2.705415e-16,1.33500529 0,2.98181778 L5.95114601e-15,75.999998 Z" id="Rectangle-10"></path>
        </g>
    </g>
</svg>
    <div class="text-content">
      <p>Magento</p>
    </div>
  </div>
  
  <div class="platform-icon large">
    

<svg width="40px" height="47px" viewBox="0 0 40 47" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy-2" transform="translate(-793.000000, -976.000000)" fill-rule="nonzero" fill="#FFFFFF">
            <g id="Group-17" transform="translate(17.000000, 186.000000)">
                <g id="Group-15-Copy" transform="translate(558.000000, 790.000000)">
                    <g id="Group-13" transform="translate(218.000000, 0.000000)">
                        <g id="magento-logo">
                            <polygon id="Shape" points="20.0201765 0 0 11.8783568 0 35.6039617 5.71500631 39 5.67465322 15.2692103 19.9798235 6.78170699 34.2849937 15.2692103 34.2849937 38.9896304 40 35.6039617 40 11.8576177"></polygon>
                            <polygon id="Shape" points="22.335 38.5724404 19.505 40.2672247 16.66 38.5878944 16.66 15 11 18.3689633 11.01 41.9465551 19.5 47 28 41.9465551 28 18.3689633 22.335 15"></polygon>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
  
  <div class="platform-icon small">
    

<svg width="40px" height="47px" viewBox="0 0 40 47" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy-2" transform="translate(-793.000000, -976.000000)" fill-rule="nonzero" fill="#FFFFFF">
            <g id="Group-17" transform="translate(17.000000, 186.000000)">
                <g id="Group-15-Copy" transform="translate(558.000000, 790.000000)">
                    <g id="Group-13" transform="translate(218.000000, 0.000000)">
                        <g id="magento-logo">
                            <polygon id="Shape" points="20.0201765 0 0 11.8783568 0 35.6039617 5.71500631 39 5.67465322 15.2692103 19.9798235 6.78170699 34.2849937 15.2692103 34.2849937 38.9896304 40 35.6039617 40 11.8576177"></polygon>
                            <polygon id="Shape" points="22.335 38.5724404 19.505 40.2672247 16.66 38.5878944 16.66 15 11 18.3689633 11.01 41.9465551 19.5 47 28 41.9465551 28 18.3689633 22.335 15"></polygon>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
  
  <div class="hover-text">
    <div class="text-content">
      <h3>AddThis + <br/> Magento</h3>
      <a href="#" class="button button-l1"><span>Install</span></a>
      <a href="#" class="button"><span>Learn More</span></a>
    </div>
  
<svg class="bg-svg top-bg" width="400px" height="446px" viewBox="0 0 400 446" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(0.000000, -1146.000000)" fill="#FFFFFF">
            <path d="M1.97372982e-15,1146 C109.843736,1145.98385 288.919226,1213.37769 400,1214.26081 L400,1592 L400,1592 C400,1593.65685 398.656854,1595 397,1595 L3,1595 L3,1595 C1.34314575,1595 3.00655663e-14,1593.65685 -1.77635684e-15,1592 L1.97372982e-15,1146 Z" id="Rectangle-10"></path>
        </g>
    </g>
</svg>
  </div>

</div>
<div class="card-wrapper blue">
  

  <div class="normal-text">
    
<svg class="bg-svg bottom-bg" width="400px" height="76px" viewBox="0 0 400 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.526947464">
        <g id="Artboard" fill="#1E1F44">
            <path d="M5.95114601e-15,75.999998 C120.856212,76.0113361 277.782729,28.7187605 400,28.0990414 L400,2.98181778 C400,1.33500529 398.209139,2.84217094e-14 396,2.84217094e-14 L4,2.84217094e-14 C1.790861,2.84217094e-14 2.705415e-16,1.33500529 0,2.98181778 L5.95114601e-15,75.999998 Z" id="Rectangle-10"></path>
        </g>
    </g>
</svg>
    <div class="text-content">
      <p>AngularJS</p>
    </div>
  </div>
  
  <div class="platform-icon large">
    

<svg width="87px" height="92px" viewBox="0 0 87 92" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Design-R1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy-8" transform="translate(-465.000000, -1792.000000)" fill-rule="nonzero" fill="#FFFFFF">
            <g id="Group-17" transform="translate(208.000000, 236.000000)">
                <g id="angular_solidBlack-Copy" transform="translate(257.000000, 1556.000000)">
                    <polygon id="Shape" points="35 48.814 42.8670213 48.814 42.8670213 48.814 42.8670213 48.814 50.7340426 48.814 42.8670213 30"></polygon>
                    <path d="M43.0835106,0 L43.0835106,0 L43.0835106,0 L0,15.272 L6.5712766,71.898 L43.0835106,92 L43.0835106,92 L43.0835106,92 L79.5957447,71.898 L86.1670213,15.272 L43.0835106,0 Z M69.9702128,70.196 L59.9281915,70.196 L59.9281915,70.196 L54.5138298,56.764 L43.0835106,56.764 L43.0835106,56.764 L43.0835106,56.764 L31.6531915,56.764 L26.2388298,70.196 L26.2388298,70.196 L16.1968085,70.196 L16.1968085,70.196 L43.0835106,10.166 L43.0835106,10.166 L43.0835106,10.166 L43.0835106,10.166 L43.0835106,10.166 L69.9702128,70.196 L69.9702128,70.196 Z" id="Shape"></path>
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
  
  <div class="platform-icon small">
    

<svg width="87px" height="92px" viewBox="0 0 87 92" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Design-R1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy-8" transform="translate(-465.000000, -1792.000000)" fill-rule="nonzero" fill="#FFFFFF">
            <g id="Group-17" transform="translate(208.000000, 236.000000)">
                <g id="angular_solidBlack-Copy" transform="translate(257.000000, 1556.000000)">
                    <polygon id="Shape" points="35 48.814 42.8670213 48.814 42.8670213 48.814 42.8670213 48.814 50.7340426 48.814 42.8670213 30"></polygon>
                    <path d="M43.0835106,0 L43.0835106,0 L43.0835106,0 L0,15.272 L6.5712766,71.898 L43.0835106,92 L43.0835106,92 L43.0835106,92 L79.5957447,71.898 L86.1670213,15.272 L43.0835106,0 Z M69.9702128,70.196 L59.9281915,70.196 L59.9281915,70.196 L54.5138298,56.764 L43.0835106,56.764 L43.0835106,56.764 L43.0835106,56.764 L31.6531915,56.764 L26.2388298,70.196 L26.2388298,70.196 L16.1968085,70.196 L16.1968085,70.196 L43.0835106,10.166 L43.0835106,10.166 L43.0835106,10.166 L43.0835106,10.166 L43.0835106,10.166 L69.9702128,70.196 L69.9702128,70.196 Z" id="Shape"></path>
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
  
  <div class="hover-text">
    <div class="text-content">
      <h3>AddThis + AngularJS</h3>
      <a href="#" class="button button-l1"><span>Install</span></a>
      <a href="#" class="button"><span>Learn More</span></a>
    </div>
  
<svg class="bg-svg top-bg" width="400px" height="446px" viewBox="0 0 400 446" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(0.000000, -1146.000000)" fill="#FFFFFF">
            <path d="M1.97372982e-15,1146 C109.843736,1145.98385 288.919226,1213.37769 400,1214.26081 L400,1592 L400,1592 C400,1593.65685 398.656854,1595 397,1595 L3,1595 L3,1595 C1.34314575,1595 3.00655663e-14,1593.65685 -1.77635684e-15,1592 L1.97372982e-15,1146 Z" id="Rectangle-10"></path>
        </g>
    </g>
</svg>
  </div>

</div>
              
            
!

CSS

              
                * {
  transition:300ms;
  font-family: 'Montserrat', sans-serif;
}

.card-wrapper {
  /* Rectangle 7 Copy 4: */
background-image: linear-gradient(-269deg, #32C6C5 1%, #4AE5AC 99%);
border-radius: 14px;
  width:300px;
  height:400px;
  position:relative;
  overflow:hidden;
  float:left;
  margin:12px;
}

.card-wrapper.orange {
/* Rectangle 7 Copy 6: */
background-image: linear-gradient(25deg, #FEBE12 0%, #FF6550 100%);
  width:400px;
  height:300px;

}

.card-wrapper.blue {
background-image: linear-gradient(-138deg, #0088F7 0%, #1EC6CE 100%);
}

.normal-text,.hover-text {
  position:relative;
}

.normal-text {
  /* Shopify: */
  font-weight:500;
font-size: 16px;
  height:40px;
color: #FFFFFF;
letter-spacing: 0;
line-height: 48px;
 transition:300ms;
}

.normal-text p{
  /* Shopify: */
transform:translateY(0);
  opacity:1;
  display:block;
  margin:0;
}

.hover-text{
  /* Shopify: */
opacity:0;
}

.text-content {
   z-index:100;
  position:relative;
  padding:12px 24px;
}

.hover-text {
  transform:translateY(100%);
  height:400px;
  transition:300ms;
  /* AddThis + Cloudflare: */

}

.hover-text .text-content h3, .hover-text .text-content .button{
  opacity:0;
  transform:translateY(20px);
}


.hover-text h3 {
font-size: 36px;
color: #1E1F44;
  margin-bottom:12px;
}

.button {
  /* Learn More: */
font-family: Montserrat-Regular;
font-size: 20px;
color: #3D3F8B;
letter-spacing: 0;
  text-decoration:none;
  padding:6px 8px;
  display:inline-block;
}


.button.button-l1{
background: linear-gradient(135deg, #3639a9 0%,#0088f7 100%);
box-shadow: 0 4px 12px 0 rgba(30,31,68,0.20);
border-radius: 59px;
  color:white;
}



 .bg-svg {
  position:absolute;
  top:0;
   left:0;
  transition:300ms;
}

.platform-icon.large {
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translateX(-50%) translateY(-50%)
    
}

.platform-icon.small {
  width:40px;
  height:40px;
  position:absolute;
  right:24px;
  top:24px;
  opacity:0;
  transform:translateX(0%) translateY(100%);
}

.platform-icon svg{
  width:100%;
  height:100%;
}

.card-wrapper:hover {
  /* Rectangle 7 Copy 4: */
/* Rectangle 7 Copy 6: */
box-shadow: 0 0px 24px 0 rgba(0,0,0,0.12);
}

.card-wrapper:hover .hover-text {
  transform:translateY(0%);
  height:30vw;
  opacity:1;
}

.card-wrapper:hover .normal-text {
  transform:translateY(-200%);
  opacity:0;
}

.card-wrapper:hover .normal-text p{
  /* Shopify: */
transform:translateY(100%);
  opacity:0;
}

.card-wrapper:hover .platform-icon.small {
  opacity:1;
  transform:translateX(0%) translateY(0%);
}

.card-wrapper:hover .platform-icon.large {
  transform:translateX(-50%) translateY(-30%);
  opacity:0;
}

.card-wrapper:hover .hover-text .text-content h3{
  opacity:1;
  transform:translateY(0px);
  transition-delay:200ms;
}

.card-wrapper:hover .hover-text .text-content .button{
  opacity:1;
  transform:translateY(0px);
  transition-delay:400ms;
}

.card-wrapper:hover .hover-text .text-content .button-l1{
  opacity:1;
  transform:translateY(0px);
  transition-delay:300ms;
}

.button span {
  border-bottom:1px solid transparent;
  padding:8px 0px;
  display:block;
}

.card-wrapper:hover .hover-text .text-content .button span:hover{
   border-bottom:1px solid;
  transition:none;
}

.button-l1 span {
  border:1px solid rgba(255,255,255,0);
  border-radius:100px;
  padding:8px 14px;
  display:block;
}

.card-wrapper:hover .hover-text .text-content .button-l1 span:hover{
  border:1px solid rgba(255,255,255,.5);
  transition:none;
}


              
            
!

JS

              
                
              
            
!
999px

Console