/****************************************/ html, body { margin: 0; background-color: #101010; font-family: sans-serif; } .slideshow { width: 100%; height: 100%; border: 0px; padding: 0px; margin: 0 auto; background-color: #000; overflow: hidden; counter-reset: slide; } input { position: absolute; opacity: 0; top: -25px; counter-increment: slide; } input:checked + .slide { transform: translateX(0px); transition: transform 0.5s ease-in-out; } input:checked + .slide .slide__content { width: 100%; display: block; } input:checked + .slide .slide__content:before { color: #FFF; position: absolute; top: 10px; right: 10px; content: counter(slide) ” of 5″; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; text-align: right; } input:checked:nth-of-type(1) ~ nav label:nth-child(1) { color: white; } input:checked:nth-of-type(2) ~ nav label:nth-child(2) { color: white; } input:checked:nth-of-type(3) ~ nav label:nth-child(3) { color: white; } input:checked:nth-of-type(4) ~ nav label:nth-child(4) { color: white; } input:checked:nth-of-type(5) ~ nav label:nth-child(5) { color: white; } .slide { transform: translateX(-100%); position: absolute; width: 50%; height: 100%; background-size: 50% 100%; transition: transform 0.5s ease-in-out; } .slide__content { box-sizing: border-box; height: 100%; overflow: auto; padding: 50px; color: #DDD; position: absolute; left: 100%; display: none; animation-name: fade-in; animation-duration: 1s; animation-iteration-count: 1; opacity: 1; } .slide__html { display: none; } .slide:nth-child(2) { background: url(“https://placehold.it/2000×2500/2E112D/fff?text=1”); background-repeat: no-repeat; background-size: 100%; background-position: center; } .slide:nth-child(2):after { position: absolute; margin: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; } .slide__html { display: none; } .slide:nth-child(4) { background: url(“https://placehold.it/2000×2500/540032/fff?text=2”); background-repeat: no-repeat; background-size: 100%; background-position: center; } .slide:nth-child(4):after { position: absolute; margin: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; } .slide__html { display: none; } .slide:nth-child(6) { background: url(“https://placehold.it/2000×2500/820333/fff?text=3”); background-repeat: no-repeat; background-size: 100%; background-position: center; } .slide:nth-child(6):after { position: absolute; margin: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; } .slide__html { display: none; } .slide:nth-child(8) { background: url(“https://placehold.it/2000×2500/C9283E/fff?text=4”); background-repeat: no-repeat; background-size: 100%; background-position: center; } .slide:nth-child(8):after { position: absolute; margin: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; } .slide__html { display: none; } .slide:nth-child(10) { background: url(“https://placehold.it/2000×2500/F0433A/fff?text=5”); background-repeat: no-repeat; background-size: 100%; background-position: center; } .slide:nth-child(10):after { position: absolute; margin: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; } nav { position: absolute; bottom: 0; right: 0; width: 50%; height: 60px; overflow: auto; background-size: 100%; height: 60px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #101010 10%); } label { box-sizing: border-box; color: #AAA; font-weight: bold; display: block; width: calc((100% / 5) – 2%); margin: 5px 1% 5px 1%; height: 50px; line-height: 50px; border-bottom: solid 4px #AAA; text-align: center; float: left; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } label:hover { cursor: pointer; color: #FFF; border-bottom: solid 4px #FFF; } label:nth-child(1) { left: calc(50% + (0 * (50% / 5))); border-bottom-color: #2E112D; } label:nth-child(2) { left: calc(50% + (1 * (50% / 5))); border-bottom-color: #540032; } label:nth-child(3) { left: calc(50% + (2 * (50% / 5))); border-bottom-color: #820333; } label:nth-child(4) { left: calc(50% + (3 * (50% / 5))); border-bottom-color: #C9283E; } label:nth-child(5) { left: calc(50% + (4 * (50% / 5))); border-bottom-color: #F0433A; } @keyframes fade-in { 0% { opacity: 0; } 50% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } window.console = window.console || function(t) {}; if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage(“resize”, “*”); } .creditTag { position: fixed; display: block; } .creditTag a { display: block; float: left; padding: 10px; width: 20px; height: 20px; opacity: 0.75; } .creditTag a:hover { border-radius: 4px; background-color: rgba(255,255,255,0.1); }

Slideshow Concept V2 (No JS)

A pure CSS and HTML slideshow concept.

To add or remove slides:

• Add a new slide template and label in the HTML
• Update the $slide-count SCSS variable
• Tab colours: Update the $c-slides SCSS variable
• Slide popout images: Update the $b-slides SCSS variable

Use the tabs below to change slide

NEW: Arrow keys work too after your first selection.

Et voila.

More

More here

Yet More

Yet more here

Zzz

Yada yada

The end

It’s over

.pos_translation { padding-bottom: 3px; } strong { font-weight: bold; } .rtl { direction: rtl; } main { color: #333; font-family: Arial, sans-serif; font-size: 14px; font-weight: 300; letter-spacing: initial; background: #fcf7d9; text-align: left; border-style: solid; border-width: 1px; border-color: #ccc; box-shadow: rgba(0,0,0,0.2) 0px 2px 5px; border-radius: 5px; padding: 6px 8px 3px 8px; position: fixed; z-index: 2147483647; top: -1500px; left: 0; box-sizing: content-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; /* To fix the following issue: 1. Have translate on hover enabled (opposed to translate on click). 2. Wisit a website that has a dropdown menu that opens on hover. 3. Open the menu. 4. Hover over a word within that menu. 5. Incidentally move the cursor over the TransOver popup. The hover menu gets closed. */ pointer-events: none; } .pos_translation { font-size: 1em; line-height: 1.2em; } .red { color: red; } .from_lang { color: grey; font-size: 0.8em; line-height: 1.2em; margin-top: 2px; margin-bottom: 3px; }

#tat_input_container { display: flex; margin-bottom: 10px; } #tat_input_container label { line-height: 26px; } #tat_input { margin-left: 5px; flex-grow: 2; font-size: 14px; line-height: 20px; border-radius: 2px; border: 1px #ccc solid; padding-left: 5px; } #tat_submit_container { display: flex; align-items: center; justify-content: space-between; } #tat_submit_container select { margin-left: 5px; } #tat_submit { width: 45px; margin-left: 5px; } #tat_to_lang { width: 150px; } #swap_languages { margin-left: 5px; margin-right: 5px; width: 24px; height: 24px; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEKElEQVR4nL1Vb0xbVRQ/97Xre23pn9FSNmBQGEqGMJQPIyU6MkMczf6gbAyNk5lo9gkTdTPGLPswzRITjcYPftREiYQ/g5EVZZEwNt3ELBmiI/wLqB1rFdaWDaSjfe+e44cHpUAL0URPcnPuu/e887vn3PM7F+A/Fs1mBi+fbNBXPHNgv6ShCa/X+48BhI02T7522lbmrrtsTct8RRCETQ+TSLTJNhreOuvcXXG4y2C1F874vL25BcWP5hWWKgQEAABKNBJZmAvNzIaCi1d6vqVkfliixdfPnH+8eO9BzxaDKQuRgCMRR2KcYhoQgaKRh/PBO+O90yM/fhTy/faD51InrvW1LuzT5z6sLKo4/LVGZ3AoSMARQEEChYgpSKAgMa5qQKaRREvaLmteST0jlHIc5usjw8M8KUBN3Yu2soP1fYLOkLrkDJadxb5pWQMgESASIDHBsC3vSR4Ja3fYUq6OjY1SQoBUq3kxHPT/lJpdUAVaMYUjMQWJKbR8clA1qWniBAyJGKpgTHLklC3cHb469POANyHA1NQUDN66+atNxCuWjJ2VgmhUI+EICkfkiKQOIiRgSKDexxIAAtMQoikjRbg4Pj6OAEmq6KsvPhuok6P7H3n6+ZaUdGep/5fv+vyDfe8AQCy/Wslo3+567n3Rnl1CKgAhEOgceeU6UbQCQCApAABAS1PjZC2XD2S7qr9EpPCD+7MDPT09SrzNcYNFdpQfuUgEAhIBEQAJGpEBmDcFAABoa2mePopYK5pt+2RZXleCi0HftTueTx4jIi1jasUTESHiH8s2MR68cea9Ap1kLCHVCJAAwnOh6ZnfR79vb29f5fzZupcMzpLyd32D1862tTY/3OiQsQiMVvuhQlfVB5xWiPUgOO0LTE3sAQD/qr+4rE0v2vsm0xmdxwTh1dbmpvubAoT+nLotq45haZBoScsorjrRkbn7qTZgQjSWZ0JJQYKtO5+oYaIx7ZigeaG1qdGfCCCWopqjtcZ99W+P64yWDI5EnFTGokou4kgMCUite4L4eTjgG/Jfv1Db3Pj56FqAGA9Ghofl/DynvDV7l3ulJQAotBRRHKEwvvaJQCOZ0vQZ+dW5Nn3/0OCtuwkBAAC228yDW/TGfL0ts4gvMZivtIV49sJaMNLqTJGQb36bReqdnJxM3CrGRkd5ulFzWYkuSnr7jlICjSbOGSzPOREgrKwpclS+13/h47Bv7LzH41lVVQnbtdvt1phT7SXWnKLjkj1rj6DTpxKBQKS+BgRMEB25+UjElMW/Fu7daD0XCfk/7ejoCCe95ETicrmYyWQSRVHUQdzrJ6WYTVmHTnmj88HZwI2WU5G5QFNnZ2c0kY8NAZKJu/qI2Vl54nawv60hPDf7TVdXF09m+6/eWafTyWlm4tLcbOBmd3f3uhbyv8rfG8mfJ968lFgAAAAASUVORK5CYII=); cursor: pointer; } #swap_languages.disabled { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEIklEQVR4nL1VX0hbVxj/7k0w6TS3QVck+qC2/tfhiMyRUR8GlU4XNzJYsFBUluXBh/Uho0PBPWww6TbEpzGz+pKBC2OS2tkHRbQd3ZiIdkoVghptdO2MRmP+3Xtzb+759nBNFl0S8WH7weF+nO+7v985h/P7DsB/DMVZBTab7YLJZLouCMKG1+s9twCdLdnf31/Q09MzWVZWZqFp+szFpIMyU2JgYKC0s7Pzga6oqHZ9fX2msbGx0mAwxBN5juNi+/v7e36/n5+cnMRzqQ4NDb3q9/t3JEnCuCRhPB4noiiiIIgkJggYi8WQ53lycHgYnJmddfX29l41mUxZTyMJu91+LRKJBCSZGEVRREEUiSATE57nkeM4ZFmWRKNRjEQieHQUFO+OjAyYzWbVab4T59rd3V1gs9ke5ubm5iMAACJgckBKfHIAIF1TW3s1HAopc3JyHrndbkwrkJeXx29sbPyh1+vfuqBW5yEChYDUMVHql0LyT0wQAZFQlZVVry8sLDxaXFzwphXY3t6Gubm5zXA4PFtXV3eNYZh8RASJEJDiEiESQXlIeCxMISIQJICIFEVRCkmSNKIo3FtbWyMAGW6R3W5/wvP89Y9u3fqxprpG/2Bi4qHL5eoDAClRwzDMyxaL5U55RWUDIgEkiAQRqqqr31CpVFoA8GcUAABwOBweQRDetlgs30uEsIFA4Mn09HQ8tSY/v0C0Wq33CCItHx8BhUKhAgDmTAEAAKfT6ZMk6X2dTvemKIrkdP7Zs61f+vp66xBRSVEUAAAgIhJC/krUUIlgcHCwimGYBvlWyNjb2/MtLS09HhsbO0H+gcXyUktLy+c/37//qdPp5LItMrkDnU7X3tHR8fWxACIitbOz83xlZaUJAF6k/hTjeeU77e02RqMppWn6w9HR0aMzBTwez1OUAQmN4uLiotu3P3EZjcafaJoWjueBEKImBKG5ufk9jUZzSalU3nA4HC8yiQAAgNlszt3d3X0utwSByO0ghhzHI8txJMqyGIlESTgcwVAojMFgiBwdBfEwEMCFxcWnVqu1Oh1v0gerq6tiSUmJqG9sbEXZtgljATltNJKcpxAJXGQuXqqvf+VdmqZ/n5+f/zOtAACAWq1eYhim/HJZWT1mEiAJc8nuRSLHOSqVZmtrM6xUKmc8Hk/6VuF2uyVBECZZllWXV1ToFbRCkeJUOBZIkCdjnuPEkbvfDS0vL38xMTFx4lZRkAatra2KwsLChteamm5euXylSW5+CTMhUEDRVdVV5YQgFQoGo8P24c+2vd5vXC4Xe5orrUACBoOB0mg0KpVKlQMpr59Wq9Xc+fIrr8/nC9iHv/3Y5/P9MD4+LmTjOhfMZjPz+NffvF1dXe1GozHrU5p1B5nQ1tam1Gq1pQcHB5tTU1P/aiH/K/4G7RvFhRjTPe0AAAAASUVORK5CYII=); cursor: auto; } main { color: #333; font-family: Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 19px; letter-spacing: initial; background: #fcf7d9; text-align: left; border-style: solid; border-width: 1px; border-color: #ccc; box-shadow: rgba(0,0,0,0.2) 0px 2px 5px; border-radius: 5px; padding: 10px 12px 12px 12px; position: fixed; z-index: 2147483647; top: 15px; right: 15px; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } #disable_on_this_page_container { margin-bottom: 8px; color: blue; } #disable_on_this_page { position: relative; vertical-align: middle; bottom: 1px; margin-right: 5px; } #top_row_container { display: flex; justify-content: space-between; } #tat_close{ width: 12px; height: 12px; background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, darkgrey 46%, darkgrey 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, darkgrey 46%, darkgrey 56%,transparent 56%, transparent 100%); }

Disable on this site

Translate

from

into

Oops! It seems like this post isn't published yet. Stay tuned for updates!