"Animated Image section"
Bootstrap 4.1.1 Snippet by thina2762

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" /> </head> <body> <section> <div class="container py-5"> <div class="row py-5"> <div class="col-sm py-5"> <h2>Title Here</h2> <p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab distinctio expedita dignissimos consectetur alias ullam vel non at quibusdam deleniti, explicabo hic ratione! Perferendis adipisci cumque eaque animi non rem, ad accusamus? Quasi et sit debitis pariatur. Unde voluptates esse quidem ea nam quod animi eos! Blanditiis magni in ipsa.</p> <a href="https://tsrtechsolutions.com" target="_blank" class="btn btn-warning"> Click Here</a> </div> <div class="col-sm"> <svg width="673" height="415" viewBox="0 0 673 415" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="673" height="415" fill="#E5E5E5"/> <g id="undraw_season_change_f99v 1" clip-path="url(#clip0)"> <rect width="673" height="415" fill="white"/> <g id="Floor"> <path id="Vector" d="M334.763 415C519.648 415 669.526 408.816 669.526 401.187C669.526 393.559 519.648 387.374 334.763 387.374C149.879 387.374 0 393.559 0 401.187C0 408.816 149.879 415 334.763 415Z" fill="#E6E6E6"/> </g> <g id="Tree"> <g id="Group 1"> <path id="Vector_2" d="M55.7152 90.0363C74.8697 90.0363 90.3976 74.2322 90.3976 54.7368C90.3976 35.2415 74.8697 19.4374 55.7152 19.4374C36.5606 19.4374 21.0327 35.2415 21.0327 54.7368C21.0327 74.2322 36.5606 90.0363 55.7152 90.0363Z" fill="#FF6584"/> <path id="Vector_3" d="M85.1981 228.08C132.252 228.08 170.396 189.257 170.396 141.366C170.396 93.4753 132.252 54.6523 85.1981 54.6523C38.1445 54.6523 0 93.4753 0 141.366C0 189.257 38.1445 228.08 85.1981 228.08Z" fill="#6C63FF"/> <path id="Vector_4" d="M93.4103 402.552H75.9597L83.9148 128.307L93.4103 402.552Z" fill="#3F3D56"/> <path id="Vector_5" d="M85.4544 180.283L104.188 153.903L85.1981 186.812L83.1451 183.156L85.4544 180.283Z" fill="#3F3D56"/> <path id="Vector_6" d="M83.4014 206.924L64.6684 180.544L83.6585 213.453L85.7115 209.797L83.4014 206.924Z" fill="#3F3D56"/> </g> </g> <g id="Clock_Face"> <path id="Vector_7" d="M346.112 402.795C433.767 402.795 504.825 330.473 504.825 241.259C504.825 152.045 433.767 79.7227 346.112 79.7227C258.458 79.7227 187.4 152.045 187.4 241.259C187.4 330.473 258.458 402.795 346.112 402.795Z" fill="#3F3D56"/> <path id="Vector_8" d="M346.112 389.423C426.51 389.423 491.686 323.087 491.686 241.259C491.686 159.43 426.51 93.0949 346.112 93.0949C265.714 93.0949 200.538 159.43 200.538 241.259C200.538 323.087 265.714 389.423 346.112 389.423Z" fill="white"/> <path id="Vector_9" d="M341.5 262C354.479 262 365 251.031 365 237.5C365 223.969 354.479 213 341.5 213C328.521 213 318 223.969 318 237.5C318 251.031 328.521 262 341.5 262Z" fill="#3F3D56"/> <path id="Vector_10" d="M349.791 100.583H341.382V116.63H349.791V100.583Z" fill="#3F3D56"/> <path id="Vector_11" d="M349.791 366.957H341.382V383.004H349.791V366.957Z" fill="#3F3D56"/> <path id="Vector_12" d="M222.611 246.073V237.515H206.845V246.073H222.611Z" fill="#3F3D56"/> <path id="Vector_13" d="M484.328 246.073V237.515H468.562V246.073H484.328Z" fill="#3F3D56"/> <path id="Vector_14" d="M366.608 40.676H325.616V88.8158H366.608V40.676Z" fill="#3F3D56"/> <path id="Vector_15" d="M346.112 54.0481C372.234 54.0481 393.41 48.0612 393.41 40.676C393.41 33.2907 372.234 27.3038 346.112 27.3038C319.99 27.3038 298.814 33.2907 298.814 40.676C298.814 48.0612 319.99 54.0481 346.112 54.0481Z" fill="#3F3D56"/> </g> <g id="Clock_hand"> <path id="Vector_16" d="M339.981 250.385L347.167 233.661L437.209 284.417L339.981 250.385Z" fill="#3F3D56"/> </g> <g id="standing_Human"> <path id="Vector_17" d="M497.642 211.234C506.48 211.234 513.645 203.942 513.645 194.947C513.645 185.952 506.48 178.66 497.642 178.66C488.805 178.66 481.64 185.952 481.64 194.947C481.64 203.942 488.805 211.234 497.642 211.234Z" fill="#2F2E41"/> <path id="Vector_18" d="M470.197 285.729L469.617 290.266C469.617 290.266 465.651 308.677 461.946 302.769C458.241 296.861 464.368 288.194 464.368 288.194L467.523 282.906L470.197 285.729Z" fill="#FFB8B8"/> <path id="Vector_19" d="M509.473 282.508L511.673 286.527C511.673 286.527 519.325 303.827 512.925 301.334C506.526 298.842 506.299 288.08 506.299 288.08L505.698 281.872L509.473 282.508Z" fill="#FFB8B8"/> <path id="Vector_20" d="M496.153 328.713L498.255 342.62V346.899H510.343V341.55C510.343 341.55 510.868 331.922 508.766 329.248C506.664 326.573 496.153 328.713 496.153 328.713Z" fill="#FFB8B8"/> <path id="Vector_21" d="M474.606 328.713L476.708 342.62V346.899H488.796V341.55C488.796 341.55 489.321 331.922 487.219 329.248C485.117 326.573 474.606 328.713 474.606 328.713Z" fill="#FFB8B8"/> <path id="Vector_22" d="M482.74 217.003C482.74 217.003 478.091 219.497 481.266 225.17C484.442 230.843 503.073 289.535 503.073 289.535L513.821 286.43L504.342 249.311L498.915 225.982L482.74 217.003Z" fill="#6C63FF"/> <path id="Vector_23" d="M495.89 211.84C502.566 211.84 507.978 206.332 507.978 199.538C507.978 192.743 502.566 187.235 495.89 187.235C489.215 187.235 483.803 192.743 483.803 199.538C483.803 206.332 489.215 211.84 495.89 211.84Z" fill="#FFB8B8"/> <path id="Vector_24" d="M501.408 201.41L499.832 226.549L488.796 218.526C488.796 218.526 492.474 203.549 491.423 202.479L501.408 201.41Z" fill="#FFB8B8"/> <path id="Vector_25" d="M501.408 224.41L489.519 215.449C489.519 215.449 484.066 213.177 482.489 215.852C480.912 218.526 473.029 258.108 477.234 265.596C477.234 265.596 499.832 270.41 504.562 267.736L506.664 253.829C506.664 253.829 509.292 245.27 505.087 239.922L501.408 224.41Z" fill="#6C63FF"/> <path id="Vector_26" d="M482.545 214.806C482.545 214.806 477.276 214.35 477.036 220.837C476.796 227.324 462.168 286.657 462.168 286.657L472.966 289.94L484.185 253.677L491.69 231.176L482.545 214.806Z" fill="#6C63FF"/> <path id="Vector_27" d="M504.825 267.468C504.825 267.468 478.81 262.387 476.183 266.131L475.657 272.015C475.657 272.015 469.876 283.247 473.029 301.434C476.183 319.62 474.081 330.852 474.081 330.852C474.081 330.852 488.27 329.248 498.781 330.852C509.292 332.457 510.868 330.852 510.868 330.852L504.825 267.468Z" fill="#2F2E41"/> <path id="Vector_28" d="M511.394 344.759L496.153 345.294L501.408 385.411C501.408 385.411 497.204 402.527 501.934 403.597C505.222 404.272 508.565 404.631 511.919 404.667C511.919 404.667 516.649 409.481 521.904 408.946C525.395 408.492 528.776 407.405 531.89 405.737C531.89 405.737 532.941 402.527 529.262 401.457C525.583 400.388 515.598 397.178 513.496 385.946L511.394 344.759Z" fill="#2F2E41"/> <path id="Vector_29" d="M489.847 344.759L474.606 345.294L479.861 385.411C479.861 385.411 475.657 402.527 480.387 403.597C483.675 404.272 487.018 404.631 490.372 404.667C490.372 404.667 495.102 409.481 500.357 408.946C503.848 408.492 507.229 407.405 510.343 405.737C510.343 405.737 511.394 402.527 507.715 401.457C504.036 400.388 494.051 397.178 491.949 385.946L489.847 344.759Z" fill="#2F2E41"/> <path id="Vector_30" d="M503.24 184.544C506.897 184.544 509.862 181.527 509.862 177.805C509.862 174.083 506.897 171.065 503.24 171.065C499.583 171.065 496.619 174.083 496.619 177.805C496.619 181.527 499.583 184.544 503.24 184.544Z" fill="#2F2E41"/> <path id="Vector_31" d="M512.069 174.154C512.069 172.488 511.463 170.882 510.367 169.644C509.272 168.406 507.765 167.625 506.137 167.451C506.366 167.427 506.597 167.415 506.827 167.415C508.583 167.415 510.267 168.125 511.509 169.389C512.751 170.653 513.449 172.367 513.449 174.154C513.449 175.942 512.751 177.656 511.509 178.92C510.267 180.184 508.583 180.894 506.827 180.894C506.597 180.894 506.366 180.881 506.137 180.857C507.765 180.684 509.272 179.903 510.367 178.665C511.463 177.427 512.069 175.82 512.069 174.154V174.154Z" fill="#2F2E41"/> <path id="Vector_32" d="M495.781 198.233C501.876 198.233 506.817 195.216 506.817 191.494C506.817 187.771 501.876 184.754 495.781 184.754C489.686 184.754 484.745 187.771 484.745 191.494C484.745 195.216 489.686 198.233 495.781 198.233Z" fill="#2F2E41"/> </g> <g id="Cloud"> <path id="Vector_33" d="M669.612 32.3459C669.161 24.2339 665.894 16.5484 660.394 10.6598C654.893 4.77119 647.517 1.06218 639.58 0.194082C631.642 -0.67402 623.66 1.35521 617.056 5.91997C610.452 10.4847 605.655 17.2883 603.522 25.1177C603.113 25.1028 602.706 25.0861 602.294 25.0861C595.017 25.0875 587.935 27.487 582.109 31.9258C576.283 36.3646 572.026 42.6039 569.974 49.7104C565.152 47.5539 559.763 47.086 554.651 48.3801C549.54 49.6741 544.994 52.6571 541.726 56.8618H646.801C649.866 56.8706 652.902 56.2498 655.726 55.0365C658.55 53.8232 661.104 52.0424 663.236 49.8006C665.368 47.5589 667.034 44.9023 668.134 41.99C669.233 39.0777 669.744 35.9695 669.635 32.8516C669.629 32.6833 669.621 32.5147 669.612 32.3459Z" fill="#E6E6E6"/> </g> <g id="Frozen_tree"> <path id="Vector_34" d="M631.517 387.961C631.52 387.861 631.532 387.763 631.532 387.663C631.534 386.12 631.155 384.601 630.429 383.246C629.703 381.892 628.654 380.745 627.378 379.911C626.102 379.078 624.641 378.584 623.129 378.477C621.616 378.369 620.102 378.65 618.724 379.295C617.432 377.776 615.685 376.731 613.753 376.32C611.821 375.908 609.809 376.153 608.027 377.016C606.244 377.88 604.789 379.314 603.885 381.1C602.98 382.885 602.675 384.924 603.018 386.902C602.972 386.902 602.927 386.895 602.881 386.895C601.441 386.893 600.021 387.241 598.739 387.91C597.457 388.579 596.351 389.549 595.512 390.741C594.673 391.933 594.126 393.311 593.916 394.761C593.706 396.211 593.839 397.692 594.305 399.079C594.77 400.467 595.554 401.721 596.592 402.738C597.629 403.754 598.89 404.504 600.27 404.925C601.65 405.346 603.108 405.425 604.524 405.157C605.94 404.888 607.273 404.28 608.411 403.381C609.129 404.805 610.2 406.014 611.517 406.888C612.835 407.762 614.353 408.272 615.923 408.366C617.493 408.46 619.06 408.136 620.469 407.426C621.878 406.716 623.081 405.643 623.959 404.315C625.036 405.112 626.272 405.658 627.58 405.912C628.887 406.167 630.234 406.124 631.524 405.787C632.813 405.451 634.014 404.828 635.04 403.965C636.065 403.101 636.891 402.017 637.458 400.791C638.025 399.565 638.318 398.227 638.318 396.872C638.317 395.517 638.023 394.178 637.455 392.953C636.887 391.727 636.061 390.644 635.034 389.781C634.008 388.918 632.807 388.297 631.517 387.961V387.961Z" fill="#E6E6E6"/> <path id="Vector_35" d="M617.207 180.471C619.289 180.471 620.976 178.753 620.976 176.634C620.976 174.515 619.289 172.797 617.207 172.797C615.125 172.797 613.437 174.515 613.437 176.634C613.437 178.753 615.125 180.471 617.207 180.471Z" fill="#E6E6E6"/> <path id="Vector_36" d="M620.222 176.634C622.304 176.634 623.992 174.916 623.992 172.797C623.992 170.678 622.304 168.96 620.222 168.96C618.14 168.96 616.453 170.678 616.453 172.797C616.453 174.916 618.14 176.634 620.222 176.634Z" fill="#E6E6E6"/> <path id="Vector_37" d="M622.484 172.797C624.566 172.797 626.254 171.079 626.254 168.96C626.254 166.841 624.566 165.123 622.484 165.123C620.402 165.123 618.714 166.841 618.714 168.96C618.714 171.079 620.402 172.797 622.484 172.797Z" fill="#E6E6E6"/> <path id="Vector_38" d="M613.437 205.027C615.519 205.027 617.207 203.309 617.207 201.19C617.207 199.071 615.519 197.353 613.437 197.353C611.355 197.353 609.667 199.071 609.667 201.19C609.667 203.309 611.355 205.027 613.437 205.027Z" fill="#E6E6E6"/> <path id="Vector_39" d="M669.23 248C671.312 248 673 246.282 673 244.163C673 242.044 671.312 240.326 669.23 240.326C667.148 240.326 665.46 242.044 665.46 244.163C665.46 246.282 667.148 248 669.23 248Z" fill="#E6E6E6"/> <path id="Vector_40" d="M610.421 201.19C612.503 201.19 614.191 199.472 614.191 197.353C614.191 195.234 612.503 193.516 610.421 193.516C608.339 193.516 606.651 195.234 606.651 197.353C606.651 199.472 608.339 201.19 610.421 201.19Z" fill="#E6E6E6"/> <path id="Vector_41" d="M606.651 195.051C608.733 195.051 610.421 193.333 610.421 191.214C610.421 189.095 608.733 187.377 606.651 187.377C604.569 187.377 602.881 189.095 602.881 191.214C602.881 193.333 604.569 195.051 606.651 195.051Z" fill="#E6E6E6"/> <path id="Vector_42" d="M623.91 402.841H606.46L614.415 128.595L623.91 402.841Z" fill="#3F3D56"/> <path id="Vector_43" d="M615.955 180.571L634.689 154.192L615.699 187.101L613.646 183.444L615.955 180.571Z" fill="#3F3D56"/> <path id="Vector_44" d="M613.902 207.212L595.169 180.833L614.159 213.742L616.212 210.085L613.902 207.212Z" fill="#3F3D56"/> </g> <g id="Snow"> <path id="Vector_45" d="M581.77 104.5C586.767 104.5 590.818 100.377 590.818 95.2916C590.818 90.2058 586.767 86.083 581.77 86.083C576.773 86.083 572.723 90.2058 572.723 95.2916C572.723 100.377 576.773 104.5 581.77 104.5Z" fill="#E6E6E6"/> <path id="Vector_46" d="M609.089 81.2481C613.249 81.2481 616.622 77.8153 616.622 73.5806C616.622 69.346 613.249 65.9131 609.089 65.9131C604.928 65.9131 601.555 69.346 601.555 73.5806C601.555 77.8153 604.928 81.2481 609.089 81.2481Z" fill="#E6E6E6"/> <path id="Vector_47" d="M645.857 124.452C650.854 124.452 654.905 120.329 654.905 115.243C654.905 110.158 650.854 106.035 645.857 106.035C640.86 106.035 636.81 110.158 636.81 115.243C636.81 120.329 640.86 124.452 645.857 124.452Z" fill="#E6E6E6"/> <path id="Vector_48" d="M577.246 166.658C582.243 166.658 586.294 162.535 586.294 157.449C586.294 152.364 582.243 148.241 577.246 148.241C572.25 148.241 568.199 152.364 568.199 157.449C568.199 162.535 572.25 166.658 577.246 166.658Z" fill="#E6E6E6"/> <path id="Vector_49" d="M645.857 219.607C650.854 219.607 654.905 215.484 654.905 210.398C654.905 205.313 650.854 201.19 645.857 201.19C640.86 201.19 636.81 205.313 636.81 210.398C636.81 215.484 640.86 219.607 645.857 219.607Z" fill="#E6E6E6"/> <path id="Vector_50" d="M654.151 177.401C656.233 177.401 657.921 175.683 657.921 173.564C657.921 171.445 656.233 169.727 654.151 169.727C652.069 169.727 650.381 171.445 650.381 173.564C650.381 175.683 652.069 177.401 654.151 177.401Z" fill="#E6E6E6"/> <path id="Vector_51" d="M630.024 85.3156C632.106 85.3156 633.794 83.5978 633.794 81.4787C633.794 79.3597 632.106 77.6418 630.024 77.6418C627.942 77.6418 626.254 79.3597 626.254 81.4787C626.254 83.5978 627.942 85.3156 630.024 85.3156Z" fill="#E6E6E6"/> <path id="Vector_52" d="M593.08 132.126C595.162 132.126 596.849 130.408 596.849 128.289C596.849 126.17 595.162 124.452 593.08 124.452C590.998 124.452 589.31 126.17 589.31 128.289C589.31 130.408 590.998 132.126 593.08 132.126Z" fill="#E6E6E6"/> <path id="Vector_53" d="M588.556 250.302C590.638 250.302 592.326 248.584 592.326 246.465C592.326 244.346 590.638 242.628 588.556 242.628C586.474 242.628 584.786 244.346 584.786 246.465C584.786 248.584 586.474 250.302 588.556 250.302Z" fill="#E6E6E6"/> </g> </g> <defs> <clipPath id="clip0"> <rect width="673" height="415" fill="white"/> </clipPath> </defs> </svg> <div class="container"> </div> </div> </div> </div> </section> </body> </html>
#Clock_hand { animation: logo1 60s linear infinite; transform-origin: inherit; transform-box: fill-box; } #Logo { animation: logo1 15s ease infinite; transform-origin: inherit; transform-box: fill-box; } #Snow { animation: snowfall 10s ease-in infinite ; transform-origin: inherit; transform-box: fill-box; } @keyframes logo1 { from{ transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } @keyframes snowfall { from { transform:translateY(0%); color: rgb(230, 230, 250) !important; } to{ transform:translateY(50%); color: rgba(230, 230, 250, 0.062)!important; } }

Related: See More

BLK• Design System
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Animated Radio tab

Questions / Comments: