<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <p>change the image background (thumbnails) / the text (contentEditable)</p> <input type="radio" name="opt" id="thumbnail-0" checked="checked"/> <label for="thumbnail-0">image 0</label> <input type="radio" name="opt" id="thumbnail-1"/> <label for="thumbnail-1">image 1</label> <input type="radio" name="opt" id="thumbnail-2"/> <label for="thumbnail-2">image 2</label> <input type="radio" name="opt" id="thumbnail-3"/> <label for="thumbnail-3">image 3</label> <input type="radio" name="opt" id="thumbnail-4"/> <label for="thumbnail-4">image 4</label> <input type="radio" name="opt" id="thumbnail-5"/> <label for="thumbnail-5">image 5</label> <input type="radio" name="opt" id="thumbnail-6"/> <label for="thumbnail-6">image 6</label> <header class="blending"> <h2 contentEditable="true" role="textbox" aria-multiline="true">And stay alive</h2> </header> <header class="textclip"> <h2 contentEditable="true" role="textbox" aria-multiline="true">And stay alive</h2> </header>

#btn--yp { box-sizing: content-box; position: fixed; z-index: 9; bottom: 1rem; right: 1rem; border: solid 1rem transparent; width: 4.625rem; height: 3.25rem; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/cover content-box; text-indent: 200vw; text-shadow: none; filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0); transition: .5s; white-space: nowrap; } #btn--yp:before { position: absolute; left: 0; bottom: 100%; margin: 1rem -.5rem; padding: .5rem; width: 100%; border-radius: 5px; background: #e8e0e0; color: #000; font: 1rem/1.25rem trebuchet ms, sans-serif; text-align: center; text-decoration: none; text-indent: 0vw; white-space: normal; animation: float 1s ease-in-out infinite alternate; content: attr(data-txt); } #btn--yp:hover, #btn--yp:focus { outline: none; filter: grayscale(0) drop-shadow(0 0 1px crimson); } @keyframes float { to { transform: translateY(0.75rem); } } * { margin: 0; padding: 0; } body { display: flex; height: 100vh; font: 900 6.5vw/ 100vh cookie; text-align: center; } @media (orientation: portrait) { body { flex-direction: column; font-size: 9vw; line-height: 50vh; } body [for] { left: 2.5vmin; } } p { position: absolute; bottom: 2.5vmin; left: 50%; padding: .375em .5em .5em; transform: translate(-50%); background: darkorange; color: white; font: 1.25rem trebuchet ms, tahoma, verdana, sans-serif; } input, label { position: absolute; } input { left: -100vw; } input:checked + label { filter: none; background-blend-mode: normal; } input:focus + label, input:hover + label { filter: sepia(1); } label { z-index: 2; overflow: hidden; top: 2.5vmin; width: 10vmin; height: 10vmin; border-radius: 5px; box-shadow: 0 0 0 3px currentcolor, 0 0 0 4px #fff; background: grey 50%/ cover; text-indent: -100vw; background-blend-mode: screen; transition: .5s; cursor: pointer; } [id='thumbnail-0']:checked ~ header { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_bg.jpg"); } [for='thumbnail-0'] { left: calc(50% + -42.5vmin); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_bg.jpg"); } @media (orientation: portrait) { [for='thumbnail-0'] { top: calc(50% + -42.5vmin); } } [id='thumbnail-1']:checked ~ header { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_butterfly_bg.jpg"); } [for='thumbnail-1'] { left: calc(50% + -30vmin); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_butterfly_bg.jpg"); } @media (orientation: portrait) { [for='thumbnail-1'] { top: calc(50% + -30vmin); } } [id='thumbnail-2']:checked ~ header { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_00.jpg"); } [for='thumbnail-2'] { left: calc(50% + -17.5vmin); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_00.jpg"); } @media (orientation: portrait) { [for='thumbnail-2'] { top: calc(50% + -17.5vmin); } } [id='thumbnail-3']:checked ~ header { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_01.jpg"); } [for='thumbnail-3'] { left: calc(50% + -5vmin); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_01.jpg"); } @media (orientation: portrait) { [for='thumbnail-3'] { top: calc(50% + -5vmin); } } [id='thumbnail-4']:checked ~ header { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_02.jpg"); } [for='thumbnail-4'] { left: calc(50% + 7.5vmin); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_02.jpg"); } @media (orientation: portrait) { [for='thumbnail-4'] { top: calc(50% + 7.5vmin); } } [id='thumbnail-5']:checked ~ header { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_03.jpg"); } [for='thumbnail-5'] { left: calc(50% + 20vmin); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_03.jpg"); } @media (orientation: portrait) { [for='thumbnail-5'] { top: calc(50% + 20vmin); } } [id='thumbnail-6']:checked ~ header { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_04.jpg"); } [for='thumbnail-6'] { left: calc(50% + 32.5vmin); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_04.jpg"); } @media (orientation: portrait) { [for='thumbnail-6'] { top: calc(50% + 32.5vmin); } } header { flex: 1; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_04.jpg) 50%/cover; } header.blending h2 { color: white; text-shadow: 0 3px 1px orange; mix-blend-mode: difference; } header.textclip h2 { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; filter: invert(1) grayscale(1) contrast(2) drop-shadow(0 3px 1px orange); } h2:focus { outline: none; }