{"id":1276,"date":"2021-07-15T21:27:57","date_gmt":"2021-07-15T12:27:57","guid":{"rendered":"http:\/\/meeny.com\/?p=1276"},"modified":"2021-07-15T22:15:33","modified_gmt":"2021-07-15T13:15:33","slug":"bootstrap5-full-page-carousel-slide-zoom-in-css-effect","status":"publish","type":"post","link":"https:\/\/meeny.com\/?p=1276","title":{"rendered":"Bootstrap5 &#8211; Full Page Carousel slide zoom-in CSS effect"},"content":{"rendered":"\n<p>Bootstrap5 &#8211; Full Page Carousel slide zoom-in CSS effect<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Bootstrap5 - Full Page Carousel slide zoom-in CSS effect\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/EkwsfH76Bk0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>HTML<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!doctype html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;!-- Required meta tags --&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n    &lt;title&gt;Hello, world!&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;main.css&quot;&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    \n\n&lt;head&gt;\n    &lt;div class=&quot;container-fluid bg-primary fixed-top&quot;&gt;\n        &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark&quot;&gt;\n            &lt;div class=&quot;container&quot;&gt;\n              &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;images\/symbol_w.svg&quot; height=&quot;24px&quot;&gt; &lt;span class=&quot;fw-bolder&quot;&gt;MeeNy&lt;\/span&gt;.com&lt;\/a&gt;\n              &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNavDropdown&quot; aria-controls=&quot;navbarNavDropdown&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;\n                &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;\/span&gt;\n              &lt;\/button&gt;\n              &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNavDropdown&quot;&gt;\n                &lt;ul class=&quot;navbar-nav ms-auto&quot;&gt;\n                  &lt;li class=&quot;nav-item&quot;&gt;\n                    &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;\/a&gt;\n                  &lt;\/li&gt;\n                  &lt;li class=&quot;nav-item&quot;&gt;\n                    &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Features&lt;\/a&gt;\n                  &lt;\/li&gt;\n                  &lt;li class=&quot;nav-item&quot;&gt;\n                    &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Pricing&lt;\/a&gt;\n                  &lt;\/li&gt;\n                  &lt;li class=&quot;nav-item dropdown&quot;&gt;\n                    &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdownMenuLink&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;\n                      Dropdown link\n                    &lt;\/a&gt;\n                    &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdownMenuLink&quot;&gt;\n                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;\/a&gt;&lt;\/li&gt;\n                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;\/a&gt;&lt;\/li&gt;\n                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;\n                    &lt;\/ul&gt;\n                  &lt;\/li&gt;\n                &lt;\/ul&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/nav&gt;\n    &lt;\/div&gt;\n&lt;\/head&gt;\n\n&lt;section&gt;\n    &lt;div id=&quot;carouselExampleDark&quot; class=&quot;carousel carousel-dark slide&quot; data-bs-ride=&quot;carousel&quot;&gt;\n        &lt;div class=&quot;carousel-indicators&quot;&gt;\n          &lt;button type=&quot;button&quot; data-bs-target=&quot;#carouselExampleDark&quot; data-bs-slide-to=&quot;0&quot; class=&quot;active&quot; aria-current=&quot;true&quot; aria-label=&quot;Slide 1&quot;&gt;&lt;\/button&gt;\n          &lt;button type=&quot;button&quot; data-bs-target=&quot;#carouselExampleDark&quot; data-bs-slide-to=&quot;1&quot; aria-label=&quot;Slide 2&quot;&gt;&lt;\/button&gt;\n          &lt;button type=&quot;button&quot; data-bs-target=&quot;#carouselExampleDark&quot; data-bs-slide-to=&quot;2&quot; aria-label=&quot;Slide 3&quot;&gt;&lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;carousel-inner&quot;&gt;\n          &lt;div class=&quot;carousel-item active&quot;&gt;\n            &lt;img src=&quot;images\/1.png&quot; class=&quot;d-block&quot; alt=&quot;...&quot;&gt;\n            &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;\n              &lt;h3 class=&quot;display-3 w100&quot;&gt;&lt;span class=&quot;w900&quot;&gt;First&lt;\/span&gt; slide &lt;span class=&quot;w400 text-primary&quot;&gt;label&lt;\/span&gt;&lt;\/h3&gt;\n              &lt;p&gt;Some representative placeholder content for the first slide.&lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;carousel-item&quot;&gt;\n            &lt;img src=&quot;images\/2.png&quot; class=&quot;d-block&quot; alt=&quot;...&quot;&gt;\n            &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;\n                &lt;h3 class=&quot;display-3 w100&quot;&gt;&lt;span class=&quot;w900&quot;&gt;Second&lt;\/span&gt; slide &lt;span class=&quot;w400 text-secondary&quot;&gt;label&lt;\/span&gt;&lt;\/h3&gt;\n              &lt;p&gt;Some representative placeholder content for the second slide.&lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;carousel-item&quot;&gt;\n            &lt;img src=&quot;images\/3.png&quot; class=&quot;d-block&quot; alt=&quot;...&quot;&gt;\n            &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;\n                &lt;h3 class=&quot;display-3 w100&quot;&gt;&lt;span class=&quot;w900&quot;&gt;Third&lt;\/span&gt; slide &lt;span class=&quot;w400 text-warning&quot;&gt;label&lt;\/span&gt;&lt;\/h3&gt;\n              &lt;p&gt;Some representative placeholder content for the third slide.&lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;button class=&quot;carousel-control-prev&quot; type=&quot;button&quot; data-bs-target=&quot;#carouselExampleDark&quot; data-bs-slide=&quot;prev&quot;&gt;\n          &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/span&gt;\n          &lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;\/span&gt;\n        &lt;\/button&gt;\n        &lt;button class=&quot;carousel-control-next&quot; type=&quot;button&quot; data-bs-target=&quot;#carouselExampleDark&quot; data-bs-slide=&quot;next&quot;&gt;\n          &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/span&gt;\n          &lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;\/span&gt;\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;div class=&quot;container&quot;&gt;\n    &lt;p class=&quot;h1 fw-bold&quot;&gt;Bold text.&lt;\/p&gt;\n&lt;p class=&quot;h1 fw-bolder&quot;&gt;Bolder weight text (relative to the parent element).&lt;\/p&gt;\n&lt;p class=&quot;h1 fw-normal&quot;&gt;Normal weight text.&lt;\/p&gt;\n&lt;p class=&quot;h1 fw-light&quot;&gt;Light weight text.&lt;\/p&gt;\n&lt;p class=&quot;h1 fw-lighter&quot;&gt;Lighter weight text (relative to the parent element).&lt;\/p&gt;\n&lt;p class=&quot;h1 fst-italic&quot;&gt;Italic text.&lt;\/p&gt;\n&lt;p class=&quot;h1 fst-normal&quot;&gt;Text with normal font style&lt;\/p&gt;\n\n&lt;hr&gt;\n&lt;p class=&quot;h1 w100&quot;&gt;Bold text.&lt;\/p&gt;\n&lt;p class=&quot;h1 w300&quot;&gt;Bolder weight text (relative to the parent element).&lt;\/p&gt;\n&lt;p class=&quot;h1 w400&quot;&gt;Normal weight text.&lt;\/p&gt;\n&lt;p class=&quot;h1 w500&quot;&gt;Light weight text.&lt;\/p&gt;\n&lt;p class=&quot;h1 w700&quot;&gt;Lighter weight text (relative to the parent element).&lt;\/p&gt;\n&lt;p class=&quot;h1 w900&quot;&gt;Italic text.&lt;\/p&gt;\n&lt;\/div&gt;\n\n\n    &lt;!-- Optional JavaScript; choose one of the two! --&gt;\n\n    &lt;!-- Option 1: Bootstrap Bundle with Popper --&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;\n\n    &lt;!-- Option 2: Separate Popper and Bootstrap JS --&gt;\n    &lt;!--\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.9.2\/dist\/umd\/popper.min.js&quot; integrity=&quot;sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.min.js&quot; integrity=&quot;sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz\/bgldoEyl4H0zUF0QKbrJ0EcQF&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;\n    --&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>SCSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@100;300;400;500;700;900&amp;display=swap');\n$font-family-base: \"roboto\", sans-serif;\n\n$color-1 : #d8b700;\n$color-2 : #7a5600;\n$color-3 : #f72585;\n$color-4 : #4361ee;\n$color-5 : #4cc9f0;\n$color-6 : #237a94;\n\n$primary:       $color-1;\n$secondary:     $color-2;\n$success:       $color-3;\n$info:          $color-4;\n$warning:       $color-5;\n$danger:        $color-6;;\n\n\n@import \".\/node_modules\/bootstrap\/scss\/bootstrap\";\n\n\nhtml,body, section, .carousel,.carousel-inner,.carousel-item{\n    height: 100%;\n}\n\n.carousel-inner .carousel-item > img{\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    animation: zoomin 10s linear infinite;\n}\n\n@keyframes zoomin {\n    0%{\n        transform: scale(1);\n    }\n    50%{\n        transform: scale(1.05);\n    }\n    100%{\n        transform: scale(1);\n    }\n}\n\n.carousel-indicators{\n    button{\n        border-radius: 50%;\n        width: 10px !important;\n        height: 10px !important;\n\n    }\n    button.active {\n        background-color: $color-1 !important;\n\n    }\n\n}\n\n\n.carousel-caption{\n    top: 50%;\n    transform: translateY(-50%);\n    bottom: inherit;\n}\n\n\n.w100 {font-weight: 100 !important;}\n.w300 {font-weight: 300 !important;}\n.w400 {font-weight: 400 !important;}\n.w500 {font-weight: 500 !important;}\n.w700 {font-weight: 700 !important;}\n.w900 {font-weight: 900 !important;}\n\n\n\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-meeny\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"gmhjERavcU\"><a href=\"https:\/\/meeny.com\/2021\/01\/21\/bootstrap5-theming\/\">Bootstrap5 theming<\/a><\/blockquote><iframe title=\"&#8220;Bootstrap5 theming&#8221; &#8212; Meeny\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/meeny.com\/2021\/01\/21\/bootstrap5-theming\/embed\/#?secret=gmhjERavcU\" data-secret=\"gmhjERavcU\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap5 &#8211; Full Page Carousel slide zoom-in CSS effect<\/p>\n","protected":false},"author":1,"featured_media":1277,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[62],"tags":[455,769,780,768,765,597,784,786,785,787,781,782,783,396,762,779,771,770,397,395,394,775,398,777,422,763,767,772,438,766,439,441],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap5 - Full Page Carousel slide zoom-in CSS effect - Meeny<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/meeny.com\/?p=1276\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap5 - Full Page Carousel slide zoom-in CSS effect - Meeny\" \/>\n<meta property=\"og:description\" content=\"Bootstrap5 - Full Page Carousel slide zoom-in CSS effect\" \/>\n<meta property=\"og:url\" content=\"https:\/\/meeny.com\/?p=1276\" \/>\n<meta property=\"og:site_name\" content=\"Meeny\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-15T12:27:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-15T13:15:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Meeny\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Meeny\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/meeny.com\/?p=1276#article\",\"isPartOf\":{\"@id\":\"https:\/\/meeny.com\/?p=1276\"},\"author\":{\"name\":\"Meeny\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9\"},\"headline\":\"Bootstrap5 &#8211; Full Page Carousel slide zoom-in CSS effect\",\"datePublished\":\"2021-07-15T12:27:57+00:00\",\"dateModified\":\"2021-07-15T13:15:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/meeny.com\/?p=1276\"},\"wordCount\":30,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?p=1276#primaryimage\"},\"thumbnailUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg\",\"keywords\":[\"bootstrap5\",\"Bootstrap5 change primary color font\",\"Bootstrap5 Theme setting\",\"Bootstrap5 theming\",\"button hover effect\",\"card hover effect\",\"Carousel caption position\",\"Carousel image animation - zoomin css effect\",\"Carousel image object-fit Cover\",\"Carousel indicator shape change to Circle\",\"Change default font\",\"Change default Theme color\",\"Change Navbar position to right\",\"css\",\"Css Custom Properties\",\"full page carousel slide\",\"GSAP\",\"horizontal scroll\",\"html\",\"html code\",\"html css\",\"invert mouse pointer\",\"javascript\",\"Page Transition\",\"responsive design\",\"Responsive Font Size\",\"scroll progress indicator\",\"Scrolltrigger\",\"sticky-top\",\"svg animation\",\"template\",\"theming\"],\"articleSection\":[\"HTML &amp; CSS\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/meeny.com\/?p=1276#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/meeny.com\/?p=1276\",\"url\":\"https:\/\/meeny.com\/?p=1276\",\"name\":\"Bootstrap5 - Full Page Carousel slide zoom-in CSS effect - Meeny\",\"isPartOf\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/meeny.com\/?p=1276#primaryimage\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?p=1276#primaryimage\"},\"thumbnailUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg\",\"datePublished\":\"2021-07-15T12:27:57+00:00\",\"dateModified\":\"2021-07-15T13:15:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/meeny.com\/?p=1276#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/meeny.com\/?p=1276\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?p=1276#primaryimage\",\"url\":\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg\",\"contentUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/meeny.com\/?p=1276#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/meeny.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap5 &#8211; Full Page Carousel slide zoom-in CSS effect\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website\",\"url\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/\",\"name\":\"Meeny\",\"description\":\"Issues &amp; News\",\"publisher\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\",\"name\":\"Meeny\",\"url\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png\",\"contentUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png\",\"width\":180,\"height\":41,\"caption\":\"Meeny\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9\",\"name\":\"Meeny\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g\",\"caption\":\"Meeny\"},\"sameAs\":[\"http:\/\/blog.epart.kr\"],\"url\":\"https:\/\/meeny.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap5 - Full Page Carousel slide zoom-in CSS effect - Meeny","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/meeny.com\/?p=1276","og_locale":"ko_KR","og_type":"article","og_title":"Bootstrap5 - Full Page Carousel slide zoom-in CSS effect - Meeny","og_description":"Bootstrap5 - Full Page Carousel slide zoom-in CSS effect","og_url":"https:\/\/meeny.com\/?p=1276","og_site_name":"Meeny","article_published_time":"2021-07-15T12:27:57+00:00","article_modified_time":"2021-07-15T13:15:33+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg","type":"image\/jpeg"}],"author":"Meeny","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Meeny","Est. reading time":"7\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/meeny.com\/?p=1276#article","isPartOf":{"@id":"https:\/\/meeny.com\/?p=1276"},"author":{"name":"Meeny","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9"},"headline":"Bootstrap5 &#8211; Full Page Carousel slide zoom-in CSS effect","datePublished":"2021-07-15T12:27:57+00:00","dateModified":"2021-07-15T13:15:33+00:00","mainEntityOfPage":{"@id":"https:\/\/meeny.com\/?p=1276"},"wordCount":30,"commentCount":2,"publisher":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization"},"image":{"@id":"https:\/\/meeny.com\/?p=1276#primaryimage"},"thumbnailUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg","keywords":["bootstrap5","Bootstrap5 change primary color font","Bootstrap5 Theme setting","Bootstrap5 theming","button hover effect","card hover effect","Carousel caption position","Carousel image animation - zoomin css effect","Carousel image object-fit Cover","Carousel indicator shape change to Circle","Change default font","Change default Theme color","Change Navbar position to right","css","Css Custom Properties","full page carousel slide","GSAP","horizontal scroll","html","html code","html css","invert mouse pointer","javascript","Page Transition","responsive design","Responsive Font Size","scroll progress indicator","Scrolltrigger","sticky-top","svg animation","template","theming"],"articleSection":["HTML &amp; CSS"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/meeny.com\/?p=1276#respond"]}]},{"@type":"WebPage","@id":"https:\/\/meeny.com\/?p=1276","url":"https:\/\/meeny.com\/?p=1276","name":"Bootstrap5 - Full Page Carousel slide zoom-in CSS effect - Meeny","isPartOf":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website"},"primaryImageOfPage":{"@id":"https:\/\/meeny.com\/?p=1276#primaryimage"},"image":{"@id":"https:\/\/meeny.com\/?p=1276#primaryimage"},"thumbnailUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg","datePublished":"2021-07-15T12:27:57+00:00","dateModified":"2021-07-15T13:15:33+00:00","breadcrumb":{"@id":"https:\/\/meeny.com\/?p=1276#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/meeny.com\/?p=1276"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?p=1276#primaryimage","url":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg","contentUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/07\/019threejs.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/meeny.com\/?p=1276#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/meeny.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap5 &#8211; Full Page Carousel slide zoom-in CSS effect"}]},{"@type":"WebSite","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website","url":"https:\/\/meeny.com\/?tag=ios-13-4-5\/","name":"Meeny","description":"Issues &amp; News","publisher":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/meeny.com\/?tag=ios-13-4-5\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization","name":"Meeny","url":"https:\/\/meeny.com\/?tag=ios-13-4-5\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/","url":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png","contentUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png","width":180,"height":41,"caption":"Meeny"},"image":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9","name":"Meeny","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g","caption":"Meeny"},"sameAs":["http:\/\/blog.epart.kr"],"url":"https:\/\/meeny.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1276"}],"collection":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1276"}],"version-history":[{"count":2,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1276\/revisions"}],"predecessor-version":[{"id":1281,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1276\/revisions\/1281"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/media\/1277"}],"wp:attachment":[{"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}