This code snippet helps you to create a card with smooth transition. It defines a card element with a clickable behavior. When the card is clicked, it toggles a class called “expanded” that may alter the card’s appearance. The card has three child SVG elements that represent the label of the card. These SVG elements have different paths that define their shapes and fill colors. The first SVG path has a brown fill color, the second has a golden color, and the third has an orange color. The colors and shapes of the SVG elements can be modified by altering the path data and the fill color. Overall, this code defines a clickable card element that can be customized to fit various UI design needs.
How to Create CSS Expandable Cards with Smooth Transition
Create the HTML structure for a card with smooth transition as follows:
<div class="card" onclick="this.classList.toggle('expanded')">
<svg class="label" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="200" width="200"><path d="M9.875 23.825L51.14 0l41.267 23.825v47.65L51.14 95.3 9.876 71.475v-47.65" fill="#463833"/><path d="M12.067 25.09L51.14 2.533l39.075 22.56v45.117L51.14 92.767l-39.073-22.56V25.092" fill="#d8ae4b"/><path d="M90.215 70.21v-.385c-.567.33-1.165.608-1.8.817-1.417.572-2.888.834-4.412.786-1.164-.188-2.327-.383-3.488-.586-1.703-.132-3.397.283-5.104.27-.484 0-.98-.047-1.464-.042-2.222.026-4.086 1.743-6.32 1.62-1.067-.06-.878-.708-1.037-1.635-.14-.81-.15-1.728-1.11-1.846-.604.1-1.207.202-1.81.31-1.058.138-1.972.117-2.99-.155-.522-.14-1.064-.365-1.607-.406-.303.008-.603.028-.903.06-.995-.202-1.576-1.353-2.277-1.99-1.42-1.288-2.833-.705-4.542-.416-1.03.175-2.25.664-3.07-.228-1.108-1.208-.726-2.866-2.477-3.556-.848-.335-1.897-.503-2.8-.576-1.415-.116-3.192-.087-4.35-1.065-.512-.435-.793-1.005-.845-1.71-.42-1.423-.965-2.793-1.637-4.114-1.408-2.105-3.755-.843-5.66-2.055-1.545-.982-2.275-3.353-2.903-4.93-.632-1.583-1.026-3.666-2.212-4.97-.425-.502-.948-.845-1.57-1.03-1.044-.593-1.635-1.945-2.046-3.025-.532-1.39-.56-4.61-2.203-5.24-1.324-.51-3.134.655-4.426-.258-1.46-1.033-1.137-5.008-1.116-6.35.018-1.182.098-2.464.28-3.713l-2.247 1.297v45.12L51.14 92.767l39.075-22.56" fill="#d49235"/><path d="M36.298 11.102c.048.043.098.08.146.128 1.453 1.418 2.48 1.178 4.457.987.837-.087 1.676-.116 2.516-.088.772 0 1.013.12 1.592.255 1.095.253 2.128-.235 3.012-.905.532-.555 1.13-1.03 1.79-1.42.783-.234.825.122 1.248.62.716.843 1.063 1.126 2.108 1.51 1.414.517 2.293 1.32 2.573 2.792.08.437.063 1.373.433 1.702.49.118.984.112 1.48-.02 1.025-.133 2.115-.452 3.152-.204 1.014.24 1.84.933 2.852 1.19 1.192.3 2.315.26 3.533.278.543-.03 1.065.058 1.568.258.654.428.58 1.5.94 2.11.526.887 1.453 1 2.44 1.03 1.33.042 2.688-.303 3.425 1.18.536 1.078.044 2.27.272 3.384 1.27.39 2.694-.897 4.037-.516 1.58.45 2.835 2.128 4.247 2.904.65.357 1.312.397 1.958.88.687.517.84.874 1.132 1.665.524 1.416 1.23 3 2.294 4.102.23.237.468.46.71.677v-10.51L51.142 2.53 36.3 11.102" fill="#efc65f"/><path d="M14.92 26.738L51.14 5.825l36.222 20.913v41.825l-36.22 20.912L14.92 68.563z" fill="none" stroke="#463833" stroke-width=".588" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="2.35002902, 2.35002902"/><g fill="#463833"><g><path d="M26.392 39.442q-2.39 0-3.803 1.813-1.402 1.813-1.402 4.94 0 3.118 1.4 4.93 1.414 1.813 3.804 1.813 2.39 0 3.78-1.812 1.403-1.813 1.403-4.93 0-3.128-1.402-4.94-1.39-1.814-3.78-1.814zm3.075 14.69l2.89 3.217h-2.65l-2.402-2.643-.554.033q-.184.01-.358.01-3.423 0-5.476-2.32-2.043-2.332-2.043-6.234 0-3.913 2.043-6.234 2.053-2.333 5.476-2.333 3.412 0 5.454 2.332 2.043 2.32 2.043 6.234 0 2.874-1.142 4.92-1.13 2.043-3.28 3.016zM34.156 49.545V42.05h2v7.418q0 1.757.673 2.64.673.875 2.02.875 1.62 0 2.553-1.05.946-1.05.946-2.863v-7.02h1.998v12.38h-2v-1.9q-.727 1.127-1.694 1.68-.956.54-2.228.54-2.097 0-3.183-1.325-1.087-1.327-1.087-3.88zM51.375 48.207q-2.423 0-3.358.564-.934.565-.934 1.924 0 1.084.695 1.725.707.63 1.913.63 1.663 0 2.663-1.195 1.01-1.205 1.01-3.194v-.453zm3.987-.84v7.064h-2v-1.88q-.683 1.13-1.705 1.67-1.02.53-2.5.53-1.868 0-2.976-1.06-1.096-1.072-1.096-2.863 0-2.09 1.37-3.15 1.38-1.06 4.106-1.06h2.803v-.2q0-1.404-.913-2.167-.9-.773-2.542-.773-1.043 0-2.032.254-.99.255-1.9.764v-1.88q1.096-.43 2.128-.64 1.032-.222 2.01-.222 2.64 0 3.944 1.393 1.304 1.393 1.304 4.222zM57.037 37.232h2v17.2h-2zM63.29 42.05h2v12.38h-2zm0-4.818h2v2.575h-2zM71.253 38.536v3.515h4.118v1.58h-4.117v6.722q0 1.514.402 1.945.413.43 1.663.43h2.053v1.704H73.32q-2.314 0-3.195-.873-.88-.884-.88-3.205v-6.72h-1.466v-1.58h1.466v-3.516z"/><path d="M80.837 55.58q-.848 2.21-1.652 2.885-.804.674-2.15.674h-1.598v-1.703h1.173q.826 0 1.282-.398.457-.4 1.01-1.88l.36-.928-4.923-12.18h2.118l3.803 9.682 3.804-9.683h2.12z"/></g><path d="M36.213 23.067l3.632 7.746.386-.18-1.493-3.188.73-.343c.933-.437 1.076-1.246.5-2.475l-.394-.84c-.53-1.13-1.235-1.717-2.142-1.29zm2.306 3.913l-1.703-3.63.832-.39c.654-.307 1.127.133 1.52.974l.427.908c.44.94.333 1.476-.347 1.795z" /><path d="M40.19 21.32l2.528 8.173.408-.127-1.13-3.654.646-.2c.71-.22 1.255-.056 1.59 1.03l.398 1.284c.138.444.255.728.437.94l.425-.132c-.216-.227-.35-.595-.454-.934l-.394-1.272c-.274-.888-.715-1.404-1.41-1.393.553-.376.666-1.013.37-1.97l-.22-.713c-.358-1.156-.952-1.727-1.9-1.433zm1.653 3.9l-1.094-3.537.877-.27c.673-.21 1.093.237 1.364 1.112l.24.77c.34 1.098-.004 1.5-.73 1.723z" /><path d="M45.638 23.93l-.56-3.4 2.105-.347-.084-.507-2.528.417 1.393 8.44 2.526-.415-.082-.507-2.106.35-.58-3.523 1.748-.288-.084-.508z" /><path d="M52.362 20.38l.123 7.6.408-.006-.138-8.554-.613.01-1.23 7.586-1.488-7.542-.612.01.14 8.554.38-.006-.124-7.576 1.496 7.542.427-.007z" /><path d="M54.533 19.624l-.986 8.5.424.048.987-8.498z" /><path d="M57.022 19.967l-.417-.09-1.37 6.318c-.26 1.195-.07 2.2.9 2.41.97.21 1.552-.627 1.81-1.822l1.37-6.318-.39-.085-1.374 6.343c-.194.896-.598 1.533-1.296 1.382-.698-.152-.802-.9-.607-1.795z" /><path d="M64.108 23.163l-2.81 7.064.38.15 3.162-7.95-.57-.225-4.055 6.53 1.53-7.535-.57-.227-3.162 7.95.353.14 2.802-7.04-1.52 7.537.395.158z" /><path d="M40.85 65.204c-.71-.64-1.587-.323-2.46.618-1.62 1.747.074 3.37-1.322 4.876-.624.672-1.27.972-1.794.486s-.272-1.152.352-1.824l.324-.35-.3-.277-.3.322c-.838.905-1.154 1.846-.427 2.52.728.676 1.643.29 2.482-.614 1.605-1.728-.09-3.352 1.323-4.875.615-.662 1.263-.978 1.78-.5.516.48.24 1.16-.374 1.822l-.15.16.3.28.124-.135c.84-.905 1.163-1.84.442-2.508z" /><path d="M42.085 66.332l-4.937 6.987.348.245 4.938-6.987z" /><path d="M42.788 67.964l-1.67 7.714.423.216 3.9-7.615-.346-.18-3.293 6.43 1.56-7.317-.496-.254-3.9 7.614.347.178z" /><path d="M47.02 68.676c-.956-.27-1.6.515-1.934 1.704l-1.182 4.213c-.334 1.188-.192 2.193.764 2.46.956.27 1.6-.515 1.934-1.703l.264-.942-.393-.11-.274.977c-.25.882-.693 1.47-1.38 1.276-.69-.192-.763-.924-.515-1.807l1.202-4.283c.248-.883.695-1.48 1.383-1.288.687.193.758.937.51 1.82l-.2.717.392.11.192-.683c.333-1.19.19-2.193-.765-2.46z" /><path d="M48.58 73.126l.3-3.434 2.126.186.044-.512-2.55-.222-.744 8.523 2.55.223.045-.512-2.124-.185.31-3.556 1.765.154.046-.51z" /><path d="M55.055 77.55l.42-.07-1.386-8.454-.33.054c-.063.654-.274 1.197-.896 1.36l.08.483c.42-.12.717-.44.88-.875z" /><path d="M56.237 68.352c-.934.337-1.033 1.347-.606 2.53l.354.978c.41 1.138 1.06 1.84 1.914 1.53.54-.194.8-.573.775-1.24l.714 1.977c.344.955.306 1.696-.375 1.942-.672.24-1.17-.293-1.486-1.167l-.045-.127-.383.14.037.102c.423 1.173 1.128 1.867 2.06 1.53.953-.343 1.034-1.347.603-2.543l-1.478-4.092c-.428-1.184-1.14-1.902-2.083-1.56zm.178.494c.672-.243 1.175.303 1.49 1.177l.353.977c.316.874.277 1.616-.395 1.858-.672.243-1.174-.304-1.49-1.177l-.352-.976c-.315-.874-.277-1.616.395-1.858z" /><path d="M58.905 67.104c-.86.516-.703 1.55-.067 2.607l.283.472.35-.21-.3-.503c-.473-.786-.63-1.55-.017-1.917.637-.382 1.21.086 1.72.934 1.21 2.01-.492 3.79 1.064 6.377l.214.356 2.355-1.415-.265-.44-1.988 1.196-.05-.083c-1.274-2.172.297-4.115-.975-6.23-.643-1.07-1.455-1.664-2.322-1.143z" /><path d="M66.402 72.346l.324-.292-4.044-7.202-.344-.38-2.093 1.89.353.39 1.77-1.598z" /></g><path d="M34.343 28.863l1.375 1.493-1.99.396-.996 1.768-.992-1.77-1.99-.4 1.38-1.49-.235-2.016 1.843.85 1.844-.846-.24 2.015M69.483 28.863l1.374 1.493-1.99.396-.997 1.768-.99-1.77-1.99-.4 1.378-1.49-.235-2.016 1.844.85 1.844-.846-.237 2.015M32.663 66.905l1.374 1.493-1.99.395-.995 1.77-.992-1.772-1.99-.4 1.378-1.49-.234-2.015 1.843.85 1.845-.846-.24 2.015M71.01 66.905l1.374 1.493-1.99.395-.995 1.77-.993-1.772-1.99-.4 1.378-1.49-.234-2.015 1.844.85 1.845-.846-.24 2.015M50.792 33.97c-.09.203-.212.398-.39.528-.16.12-.357.192-.558.216-.41.048-.847-.105-1.107-.434-.155-.196-.235-.44-.25-.686-.06-.993.82-1.562 1.717-1.414.316.052.578.32.71.6.075.16.094.3.076.474-.02.185-.06.366-.125.54-.022.057-.046.117-.073.176zm12.72 2.82c-2.712-4.382-7.133-5.778-11.874-5.622-.274-.257-.637-.45-1.122-.528-4.943-.795-10.65 3.494-13.685 6.996-.086.102.056.25.15.15 3.09-3.298 8.752-6.107 10.868-6.51.482-.1 1.192-.05 1.91.04-2.446.418-2.804 4.022-.04 4.15 1.922.09 3.05-2.364 2.29-3.82.11.01.212.02.284.018 1.522-.03 2.95.087 4.382.497 2.695.772 4.77 2.692 6.39 4.89.194.26.626.028.447-.26M49.564 61.28c.09-.202.213-.396.39-.528.162-.12.36-.192.558-.215.412-.05.848.105 1.108.434.155.197.235.44.25.687.06.992-.82 1.562-1.717 1.414-.317-.052-.578-.32-.71-.598-.075-.16-.094-.302-.076-.477.02-.183.06-.364.125-.537.022-.06.046-.12.073-.178zm-12.718-2.818c2.71 4.38 7.132 5.778 11.873 5.62.273.257.636.45 1.12.53 4.945.793 10.65-3.496 13.686-6.998.088-.1-.056-.248-.15-.148-3.09 3.296-8.75 6.105-10.867 6.507-.483.1-1.192.05-1.91-.04 2.446-.416 2.802-4.02.038-4.15-1.92-.088-3.048 2.365-2.29 3.822-.108-.01-.212-.02-.284-.02-1.522.033-2.95-.086-4.382-.496-2.694-.772-4.77-2.692-6.39-4.888-.194-.262-.624-.03-.446.26M51.14 89.475c.784.204 1.78-.056 2.577-.175.15-.022.15-.28 0-.304-.796-.12-1.793-.378-2.576-.174-.323.084-.323.57 0 .653" fill="#463833"/></svg>
<div class="text1">
<div class="text-content">
<h1 class="title">OUR GOODS</h1>
<div class="body-text">are delivered with the same high quality as decades ago</div>
</div>
</div>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 35" width="30"><path d="M5 30L50 5l45 25" fill="none" stroke="#000" stroke-width="5"/></svg>
</div>
<div class="card" onclick="this.classList.toggle('expanded')">
<svg class="label" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="200" width="200"><path d="M91.673 67.13c7.954-10.064 7.954-24.343 0-34.407-1.492-12.742-11.59-22.838-24.33-24.33-10.065-7.955-24.344-7.955-34.41 0-12.74 1.492-22.836 11.588-24.33 24.33C.65 42.787.65 57.066 8.604 67.13c1.494 12.742 11.59 22.837 24.33 24.33 10.066 7.956 24.345 7.956 34.41 0 12.74-1.493 22.838-11.588 24.33-24.33" fill="#463833"/><path d="M89.43 66.408c7.586-9.6 7.586-23.22 0-32.82-1.425-12.155-11.056-21.785-23.21-23.21-9.6-7.587-23.22-7.587-32.82 0-12.155 1.425-21.785 11.055-23.21 23.21-7.587 9.6-7.586 23.22 0 32.82 1.425 12.155 11.055 21.785 23.21 23.21 9.6 7.587 23.22 7.587 32.82 0 12.154-1.425 21.785-11.055 23.21-23.21" fill="#d8ae4b"/><path d="M93.703 56.87c-1.133.458-2.263.53-3.39.22-.263-.175-.55-.27-.856-.287-.374 2.82-1.052 5.355-3.642 6.95-.89.546-1.71.614-2.647.93-.796.27-1.393.922-2.204 1.2-.963.333-1.97-.154-2.913.167-.95.325-.984 1.367-1.51 2.11-.397.565-1.19 1.703-1.823 2.01-.81.39-.726-.236-1.373-.5-1.41-.576-2.026 1.64-3.26.565-.35-.438-.78-.784-1.283-1.04-.384-.265-.747-.558-1.088-.88-.617-.013-.842.53-1.045 1.025-.263.64-.08 1.727-.888 1.97-.337.1-.948-.068-1.315-.053-.25-.04-.496-.02-.738.062-.33.156-.64.345-.93.568-.696.014-.775-.648-1.29-.985-.82-.536-.86.055-1.665.304-.538.168-.636.007-1.054-.182-.588-.267-.695-.646-1.553-.396-.94.275-1.214 1.328-2.234 1.25-.23-.17-.485-.27-.768-.3-.517.05-1.033.036-1.547-.044-.493-.122-1.278-.49-1.626-.895-.487-.564-.22-1.445-1.3-1.413-.75.022-1.077 1.067-1.915.687-.608-.276-.997-1.262-1.71-1.51-.762-.265-1.558.548-2.377.584-.615.027-1.746.18-2.32-.075-.22-.2-.437-.402-.652-.607-.56-.32-1.16-.52-1.803-.6-.94-.135-1.828.095-2.477-.757-.573-.752-.637-1.903-1.333-2.567-1.243-1.184-2.642.646-3.85.56-.226-1.128.313-2.42-.752-3.245-.78-.607-1.678-.547-2.59-.695-1.45-.234-1.985-.764-2.69-2.043-.8-1.458-1.205-2.165-2.944-2.182-.93-.01-2.778.42-3.59-.337-.643-.6-.29-2.304-.372-3.085-.09-.892.005-2.88-.544-3.673-.594-.855-1.433-.377-2.22-.11-1.49.508-3.452 1.01-5.028 1.028-1.267.015-1.27-.36-1.333-1.613-.063-1.224.065-2.788-1.05-3.48-.41-.014-.792-.115-1.153-.304-.235-.398-.254-.82-.055-1.267.172-1.045 1.426-4.348.278-5.114-4.105 8.89-3.036 19.574 3.24 27.515 1.423 12.154 11.054 21.785 23.208 23.21 9.6 7.586 23.22 7.586 32.82 0 12.155-1.425 21.786-11.056 23.21-23.21 2.32-2.934 3.92-6.246 4.822-9.702-.292.08-.582.168-.877.236" fill="#d49235"/><path d="M93.925 42.19c-.94-3.057-2.425-5.982-4.496-8.603-1.425-12.154-11.056-21.784-23.21-23.21-9.6-7.586-23.22-7.586-32.82 0-4.248.5-8.173 2.017-11.56 4.275.652.42 1.23 1 2.024 1.443 1.27.71 2.704.703 4.12.65 1.23-.047 2.72-.107 3.927-.33.975-.178 1.85-.767 2.656-1.32.58-.376 1.108-.81 1.587-1.306.67-.452.915-.344 1.727-.33 1.825.028 3.187-1.062 4.73-1.884.968-.516 1.686-.913 2.704-.47 1.028.447 1.81 1.24 2.95 1.556 1.893.524 3.743-.52 5.646-.564.922-.022 2.1-.176 2.932.303 1.09.628 1.422 1.84 2.674 2.372 1.155.492 2.38.468 3.594.695 1.737.324 2.03 1.883 2.517 3.44.318 1.02.29 1.452 1.39 1.696 1.95.432 4.034-.194 5.982-.29 2.865-.14 4.48 3.114 4.626 5.585.068 1.155.075 2.105 1.283 2.6.95.39 1.797.698 2.634 1.35 2.376 1.856 4.25 4.16 4.295 7.308.01.863-.35 1.445.57 1.84.5.092.993.213 1.48.365 1.396.398 2.742.88 4.03 1.564.674.357 1.35.794 2.005 1.266" fill="#efc65f"/><path d="M86.843 65.337c7.093-8.974 7.093-21.705 0-30.68-1.33-11.36-10.333-20.362-21.694-21.693-8.974-7.092-21.705-7.092-30.68 0-11.36 1.33-20.362 10.334-21.694 21.694-7.092 8.974-7.092 21.705 0 30.68C14.106 76.698 23.11 85.7 34.47 87.03c8.975 7.094 21.706 7.094 30.68 0C76.51 85.7 85.51 76.7 86.842 65.338z" fill="none" stroke="#463833" stroke-width=".59" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="2.35964276, 2.35964276"/><g fill="#463833"><path d="M32.216 19.61l4.44 9.473.474-.22-1.827-3.9.893-.418c1.14-.534 1.316-1.524.612-3.026l-.483-1.03c-.647-1.38-1.51-2.098-2.62-1.578zm2.82 4.786l-2.08-4.44 1.016-.475c.802-.375 1.38.163 1.862 1.19l.52 1.11c.54 1.15.408 1.807-.424 2.197z" /><path d="M37.08 17.474l3.092 9.995.5-.155-1.384-4.47.79-.244c.87-.267 1.536-.067 1.947 1.26l.486 1.57c.17.544.312.89.534 1.15l.52-.16c-.263-.28-.426-.73-.555-1.143l-.482-1.556c-.336-1.084-.875-1.715-1.726-1.702.677-.46.816-1.24.454-2.41l-.27-.87c-.437-1.414-1.163-2.112-2.323-1.753zm2.023 4.772l-1.34-4.326 1.075-.332c.823-.255 1.336.29 1.668 1.36l.29.943c.416 1.344-.002 1.833-.89 2.108z" /><path d="M43.717 20.673l-.69-4.158 2.576-.426-.103-.62-3.09.51 1.71 10.323 3.09-.512-.103-.618-2.574.426-.713-4.305 2.138-.355-.103-.62z" /><path d="M51.943 16.326l.15 9.295.5-.007-.17-10.46-.75.012-1.505 9.276-1.817-9.222-.748.012.17 10.46.464-.007-.15-9.265 1.83 9.223.52-.007z" /><path d="M54.59 15.398L53.39 25.792l.52.06 1.195-10.394z" /><path d="M57.634 15.816l-.51-.11-1.67 7.728c-.316 1.46-.082 2.69 1.104 2.945 1.187.256 1.896-.768 2.212-2.23l1.67-7.727-.477-.103-1.677 7.757c-.236 1.096-.73 1.876-1.584 1.69-.854-.183-.98-1.098-.744-2.193z" /><path d="M66.302 19.718l-3.43 8.64.464.184 3.86-9.723-.696-.278-4.953 7.988 1.864-9.214-.695-.277-3.86 9.723.43.172 3.42-8.613-1.852 9.218.485.193z" /><path d="M37.887 71.138c-.866-.784-1.94-.394-3.008.757-1.983 2.136.09 4.12-1.618 5.962-.763.82-1.553 1.19-2.193.595-.64-.594-.334-1.41.43-2.23l.395-.43-.365-.338-.366.394c-1.027 1.107-1.414 2.257-.524 3.083.89.827 2.008.355 3.035-.75 1.962-2.115-.11-4.1 1.617-5.963.753-.81 1.545-1.197 2.177-.61.63.586.294 1.415-.458 2.226l-.183.197.365.34.152-.164c1.027-1.107 1.422-2.25.54-3.068z" /><path d="M39.397 72.517L33.36 81.06l.426.303 6.037-8.545z" /><path d="M40.27 74.522l-2.032 9.435.515.263 4.762-9.315-.424-.217-4.02 7.865 1.9-8.95-.607-.31L35.6 82.61l.425.216z" /><path d="M45.446 75.39c-1.17-.328-1.956.632-2.363 2.085l-1.44 5.153c-.408 1.454-.234 2.682.936 3.01 1.168.327 1.955-.633 2.36-2.087l.323-1.15-.48-.135-.335 1.195c-.302 1.08-.844 1.797-1.685 1.562-.842-.236-.933-1.13-.63-2.21l1.465-5.24c.302-1.08.848-1.81 1.69-1.575.84.235.928 1.144.626 2.224l-.245.88.48.133.233-.834c.407-1.455.232-2.683-.937-3.01z" /><path d="M47.377 80.83l.36-4.198 2.6.222.053-.625-3.12-.268-.892 10.424 3.12.267.053-.625-2.6-.223.373-4.348 2.16.185.053-.626z" /><path d="M55.324 86.225l.515-.085-1.722-10.335-.403.067c-.074.8-.33 1.464-1.09 1.667l.097.588c.516-.146.876-.54 1.075-1.073z" /><path d="M56.757 74.97c-1.14.415-1.258 1.65-.73 3.097l.434 1.194c.508 1.39 1.303 2.246 2.348 1.866.66-.24.974-.705.943-1.52l.88 2.414c.426 1.166.382 2.073-.45 2.376-.82.3-1.432-.353-1.82-1.42l-.058-.155-.47.172.047.126c.52 1.433 1.385 2.28 2.526 1.863 1.162-.422 1.258-1.65.725-3.11l-1.82-5c-.527-1.446-1.402-2.32-2.553-1.9zm.22.603c.82-.3 1.438.367 1.827 1.434l.435 1.194c.388 1.068.344 1.975-.477 2.274-.82.3-1.438-.367-1.827-1.434l-.435-1.194c-.388-1.067-.344-1.974.477-2.273z" /><path d="M60.026 73.425c-1.048.635-.853 1.898-.07 3.188l.35.576.426-.26-.373-.614c-.582-.958-.775-1.89-.028-2.343.776-.47 1.48.1 2.107 1.134 1.488 2.454-.585 4.637 1.33 7.794l.263.435 2.87-1.74-.324-.538-2.426 1.47-.062-.1c-1.568-2.65.344-5.035-1.222-7.616-.79-1.302-1.787-2.027-2.844-1.385z" font-size="17.887"/><path d="M69.234 79.787l.394-.36-4.983-8.784-.423-.464-2.55 2.323.434.474 2.155-1.964z" font-size="17.078"/><g style="-inkscape-font-specification:'Lobster1 0.29999999999999999'" font-size="42.53" font-family="Lobster" letter-spacing="-5.636"><path d="M18.807 35.262h3.243v21.61h11.673v2.776H18.807z"/><path d="M40.797 50.452q-3.58 0-4.96.833-1.382.833-1.382 2.842 0 1.6 1.028 2.548 1.044.93 2.826.93 2.455 0 3.932-1.763 1.494-1.78 1.494-4.72v-.67zm5.893-1.24v10.436h-2.954V56.87q-1.012 1.667-2.52 2.468-1.51.784-3.694.784-2.762 0-4.4-1.568-1.62-1.585-1.62-4.23 0-3.088 2.022-4.656 2.04-1.568 6.07-1.568h4.142v-.294q0-2.075-1.35-3.202-1.332-1.143-3.756-1.143-1.542 0-3.003.377-1.46.375-2.81 1.127v-2.777q1.622-.637 3.148-.947 1.525-.327 2.97-.327 3.9 0 5.828 2.058 1.927 2.06 1.927 6.24zM61.343 50.517q0-3.315-1.35-5.194-1.33-1.895-3.676-1.895-2.344 0-3.693 1.895-1.332 1.88-1.332 5.194 0 3.316 1.332 5.21 1.35 1.88 3.693 1.88 2.345 0 3.677-1.88 1.35-1.894 1.35-5.21zm-10.05-6.386q.93-1.633 2.343-2.417 1.43-.8 3.404-.8 3.275 0 5.314 2.646 2.056 2.645 2.056 6.957 0 4.312-2.056 6.958-2.04 2.647-5.314 2.647-1.975 0-3.404-.784-1.413-.8-2.344-2.434v2.744h-2.97V34.232h2.97z"/><path d="M80.33 49.75v1.47H66.75q.192 3.103 1.83 4.736 1.654 1.617 4.592 1.617 1.702 0 3.29-.424 1.607-.426 3.18-1.275v2.842q-1.59.686-3.26 1.045-1.67.36-3.387.36-4.303 0-6.823-2.55-2.505-2.547-2.505-6.89 0-4.493 2.376-7.123 2.393-2.647 6.44-2.647 3.628 0 5.732 2.385 2.12 2.368 2.12 6.452zm-2.953-.882q-.033-2.467-1.365-3.937-1.317-1.47-3.5-1.47-2.473 0-3.966 1.422-1.477 1.42-1.702 4.002zM80.822 34.232h2.955v25.416h-2.955z"/></g></g><path d="M71.753 24.328c-.813.672-1.348 1.612-1.923 2.484-.69 1.047-1.445 2.077-2.056 3.174-.308.552.438 1.16.887.684.86-.913 1.608-1.94 2.395-2.913.706-.874 1.442-1.7 1.866-2.75.29-.718-.693-1.07-1.167-.68M78.084 30.7c-1.158.658-2.138 1.654-3.152 2.514-.425.36.144 1.103.598.773 1.074-.78 2.276-1.496 3.19-2.465.406-.432-.11-1.12-.636-.822M31.178 29.67c-1.68-1.9-3.445-3.718-5.46-5.265-.535-.41-1.08.434-.684.887 1.64 1.874 3.553 3.48 5.52 5.003.44.343 1.01-.187.624-.625M23.798 30.92c-.75-.627-1.578-.995-2.462-1.394-.417-.188-.76.364-.363.622.812.526 1.574 1.032 2.504 1.32.303.095.577-.334.32-.55M28.035 71.562c-1.406 1.56-3.18 3.102-4.18 4.965-.27.503.333.89.742.573 1.633-1.27 2.84-3.244 4.12-4.856.38-.476-.257-1.154-.682-.682M21.684 67.837c-.846.8-1.792 1.558-2.48 2.5-.26.353.25.854.603.603.95-.676 1.72-1.614 2.53-2.45.417-.427-.22-1.062-.653-.653M77.262 72.51c-1.23-1.942-2.956-3.615-4.463-5.343-.4-.455-1.022.2-.655.655 1.413 1.752 2.74 3.716 4.408 5.237.368.334.994-.1.71-.55M81.305 65.667c-.985-.85-2.25-1.408-3.38-2.044-.523-.294-.968.478-.467.798 1.097.7 2.18 1.55 3.397 2.02.43.165.79-.478.45-.773M69.188 38.535c-7.88-13.525-27.072-12.993-36.097-1.23-.233.304.292.708.534.41 9.698-11.982 25.874-10.205 34.886 1.343.31.394.918-.11.678-.523M65.97 63.683c-7.19 8.403-17.13 10.6-26.718 4.505-.223-.142-.495.2-.285.37 8.4 6.875 22.062 5.315 27.81-4.253.295-.492-.423-1.072-.808-.622" fill="#463833"/></svg>
<div class="text2">
<div class="text-content">
<h1 class="title">OUR LABEL</h1>
<div class="body-text">has stayed the same reliable brand for nearly a century</div>
</div>
</div>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 35" width="30"><path d="M5 30L50 5l45 25" fill="none" stroke="#000" stroke-width="5"/></svg>
</div>
Now, style the card with smooth transition using the following CSS styles:
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:900');
body {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
font-family: sans-serif;
margin: 0;
background: #6D6027;
background: -webkit-linear-gradient(left, #D3CBB8, #6D6027);
background: -o-linear-gradient(left, #D3CBB8, #6D6027);
background: linear-gradient(to right, #D3CBB8, #6D6027);
}
@media (max-width: 767px) {
body {
display: block;
}
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
cursor: pointer;
height: 300px;
margin: 20px;
padding: 0 20px;
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0.025);
text-align: center;
transition: height 1000ms;
width: 260px;
}
@media (max-width: 767px) {
.card {
left: calc(50% - 20px);
transform: translateX(-50%);
}
}
.card.expanded {
height: 400px;
}
.label {
margin-top: 30px;
transform: translateY(10px);
transition: transform 1000ms;
}
.card.expanded .label {
transform: translateY(0);
}
.text1 {
clip-path: polygon(0% 100%, 0 -90%, 50% -5%, 100% -90%, 100% 100%);
-webkit-clip-path: polygon(0% 100%, 0 -90%, 50% -5%, 100% -90%, 100% 100%);
transition: clip-path 1000ms;
}
.card.expanded .text1 {
clip-path: polygon(0% 100%, 0 -100%, 50% -15%, 100% -100%, 100% 100%);
-webkit-clip-path: polygon(0% 100%, 0 -100%, 50% -15%, 100% -100%, 100% 100%);
}
.text2 {
clip-path: polygon(0% 100%,0% -80%,15% -70%,17.23% -53.59%,23% -40%,27.23% -28.94%,35% -20%,41.09% -13.59%,50% -10%,58.91% -13.23%,65% -20%,72.77% -28.23%,77% -40%,82.77% -54.65%,85% -70%,100% -80%,100% 100%);
-webkit-clip-path: polygon(0% 100%,0% -80%,15% -70%,17.23% -53.59%,23% -40%,27.23% -28.94%,35% -20%,41.09% -13.59%,50% -10%,58.91% -13.23%,65% -20%,72.77% -28.23%,77% -40%,82.77% -54.65%,85% -70%,100% -80%,100% 100%);
transition: clip-path 1000ms;
}
.card.expanded .text2 {
clip-path: polygon(0% 100%,0% -90%,15% -80%,17.23% -63.59%,23% -50%,27.23% -38.94%,35% -30%,41.09% -23.59%,50% -20%,58.91% -23.23%,65% -30%,72.77% -38.23%,77% -50%,82.77% -64.65%,85% -80%,100% -90%,100% 100%);
-webkit-clip-path: polygon(0% 100%,0% -90%,15% -80%,17.23% -63.59%,23% -50%,27.23% -38.94%,35% -30%,41.09% -23.59%,50% -20%,58.91% -23.23%,65% -30%,72.77% -38.23%,77% -50%,82.77% -64.65%,85% -80%,100% -90%,100% 100%);
}
.text-content {
transform: translateY(-160px);
transition: transform 1000ms;
}
.card.expanded .text-content {
transform: translateY(-15px);
}
.chevron {
position: absolute;
bottom: 20px;
left: calc(50% - 15px);
transform-origin: 50%;
transform: rotate(180deg);
transition: transform 1000ms;
}
.card.expanded .chevron {
transform: rotate(0deg);
}
.title {
font-family: 'Alegreya Sans', sans-serif;
font-weight: 900;
margin: 20px 0 12px;
}
.body-text {
padding: 0 20px;
}
That’s all! hopefully, you have successfully created CSS Expandable Cards with Smooth Transition. If you have any questions or suggestions, feel free to comment below.
