{"id":1960,"date":"2020-06-09T03:03:15","date_gmt":"2020-06-09T03:03:15","guid":{"rendered":"http:\/\/csshint.com\/?p=1960"},"modified":"2023-02-19T10:35:34","modified_gmt":"2023-02-19T10:35:34","slug":"css-slideshow","status":"publish","type":"post","link":"https:\/\/csshint.com\/css-slideshow\/","title":{"rendered":"20 + CSS Slideshow Design"},"content":{"rendered":"<p>Latest Collection of free Hand picked Pure Html <strong>CSS Slideshow<\/strong> Design With Impressive Transition Effects. Demo and Download the zip (*.zip).<\/p>\n<h4><span>1.<\/span> double exposure carousel slider <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"double exposure carousel slider\" src=\"https:\/\/codepen.io\/mnmxmx\/embed\/vKxQbm?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mnmxmx\/pen\/vKxQbm'>double exposure carousel slider<\/a> by Misaki Nakano<br \/>\n  (<a href='https:\/\/codepen.io\/mnmxmx'>@mnmxmx<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Misaki Nakano <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/mnmxmx\/pen\/vKxQbm\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n\n<hr>\n<h4><span>2.<\/span> React Slider w\/ Hover Effect <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"React Slider w\/ Hover Effect\" src=\"https:\/\/codepen.io\/hexagoncircle\/embed\/jgGxKR?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/hexagoncircle\/pen\/jgGxKR'>React Slider w\/ Hover Effect<\/a> by Ryan Mulligan<br \/>\n  (<a href='https:\/\/codepen.io\/hexagoncircle'>@hexagoncircle<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Ryan Mulligan <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/hexagoncircle\/pen\/jgGxKR\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n\n<hr>\n<h4><span>3.<\/span> Motion Reveal Slideshow <\/h4>\n<p>A simple image slideshow with a motion reveal effect when navigating between slides and a fullscreen details view.<\/p>\n<figure>\n<div id=\"attachment_1961\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/MotionRevealSlideshow_01.jpg\"><img aria-describedby=\"caption-attachment-1961\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/MotionRevealSlideshow_01.jpg\" alt=\"Motion Reveal Slideshow_01\" width=\"800\" height=\"500\" class=\"size-full wp-image-1961\" srcset=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/MotionRevealSlideshow_01.jpg 800w, https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/MotionRevealSlideshow_01-300x188.jpg 300w, https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/MotionRevealSlideshow_01-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-1961\" class=\"wp-caption-text\">Motion Reveal Slideshow_01<\/p><\/div><br \/>\n<\/figure>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Mary Lou <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/tympanus.net\/codrops\/2018\/07\/26\/motion-reveal-slideshow\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n\n<hr>\n<h4><span>4.<\/span> Layer Motion Slideshow <\/h4>\n<p>A CSS Grid-based slideshow template with a layer motion effect on the main image and title.<\/p>\n<figure>\n<div id=\"attachment_1964\" style=\"width: 713px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Layer-Motion-Slideshow.jpg\"><img aria-describedby=\"caption-attachment-1964\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Layer-Motion-Slideshow.jpg\" alt=\"Layer Motion Slideshow\" width=\"703\" height=\"437\" class=\"size-full wp-image-1964\" srcset=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Layer-Motion-Slideshow.jpg 703w, https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Layer-Motion-Slideshow-300x186.jpg 300w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/a><p id=\"caption-attachment-1964\" class=\"wp-caption-text\">Layer Motion Slideshow<\/p><\/div><br \/>\n<\/figure>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Mary Lou <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/tympanus.net\/codrops\/2019\/01\/24\/layer-motion-slideshow\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>5.<\/span> Crossroads Slideshow <\/h4>\n<p>An experimental slideshow with an inclined look, three slide previews and a content view on click.<\/p>\n<figure>\n<div id=\"attachment_1966\" style=\"width: 713px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Crossroads-Slideshow.jpg\"><img aria-describedby=\"caption-attachment-1966\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Crossroads-Slideshow.jpg\" alt=\"Crossroads Slideshow\" width=\"703\" height=\"437\" class=\"size-full wp-image-1966\" srcset=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Crossroads-Slideshow.jpg 703w, https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Crossroads-Slideshow-300x186.jpg 300w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/a><p id=\"caption-attachment-1966\" class=\"wp-caption-text\">Crossroads Slideshow<\/p><\/div><br \/>\n<\/figure>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Mary Lou <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/tympanus.net\/codrops\/2019\/04\/03\/crossroads-slideshow\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>6.<\/span> Triple Panel Reveal Slideshow <\/h4>\n<p>A fullscreen image slideshow with lateral image previews and a reveal animation using TweenMax.<\/p>\n<figure>\n<div id=\"attachment_1968\" style=\"width: 808px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Triple-Panel-Reveal-Slideshow.jpg\"><img aria-describedby=\"caption-attachment-1968\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Triple-Panel-Reveal-Slideshow.jpg\" alt=\"Triple Panel Reveal Slideshow\" width=\"798\" height=\"595\" class=\"size-full wp-image-1968\" srcset=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Triple-Panel-Reveal-Slideshow.jpg 798w, https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Triple-Panel-Reveal-Slideshow-300x224.jpg 300w, https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Triple-Panel-Reveal-Slideshow-768x573.jpg 768w\" sizes=\"(max-width: 798px) 100vw, 798px\" \/><\/a><p id=\"caption-attachment-1968\" class=\"wp-caption-text\">Triple Panel Reveal Slideshow<\/p><\/div><br \/>\n<\/figure>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Mary Lou <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/tympanus.net\/codrops\/2018\/06\/26\/triple-panel-reveal-slideshow\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>7.<\/span> Split Slick Slideshow <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Split Slick Slideshow\" src=\"https:\/\/codepen.io\/supah\/embed\/zZaPeE?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/supah\/pen\/zZaPeE'>Split Slick Slideshow<\/a> by Fabio Ottaviani<br \/>\n  (<a href='https:\/\/codepen.io\/supah'>@supah<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Fabio Ottaviani <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/supah\/pen\/zZaPeE\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>8.<\/span> Animated Fragment Slideshow <\/h4>\n<figure>\n<div id=\"attachment_1970\" style=\"width: 710px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Animated-Fragment-Slideshow.jpg\"><img aria-describedby=\"caption-attachment-1970\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Animated-Fragment-Slideshow.jpg\" alt=\"Animated Fragment Slideshow\" width=\"700\" height=\"522\" class=\"size-full wp-image-1970\" srcset=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Animated-Fragment-Slideshow.jpg 700w, https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Animated-Fragment-Slideshow-300x224.jpg 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><p id=\"caption-attachment-1970\" class=\"wp-caption-text\">Animated Fragment Slideshow<\/p><\/div><br \/>\n<\/figure>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Luis Manuel <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/tympanus.net\/codrops\/2018\/02\/21\/animated-fragment-slideshow\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>9.<\/span> Slider transitions <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Slider transitions\" src=\"https:\/\/codepen.io\/fluxus\/embed\/rweVgp?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/fluxus\/pen\/rweVgp'>Slider transitions<\/a> by Mirko Zori\u0107<br \/>\n  (<a href='https:\/\/codepen.io\/fluxus'>@fluxus<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Mirko Zori\u0107 <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/fluxus\/pen\/rweVgp\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>10.<\/span> Fullscreen drag-slider with parallax <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Fullscreen drag-slider with parallax\" src=\"https:\/\/codepen.io\/suez\/embed\/ByvKXE?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/suez\/pen\/ByvKXE'>Fullscreen drag-slider with parallax<\/a> by Nikolay Talanov<br \/>\n  (<a href='https:\/\/codepen.io\/suez'>@suez<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Nikolay Talanov <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/suez\/pen\/ByvKXE\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>11.<\/span> Geometrical Birds &#8211; slideshow <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Geometrical Birds - slideshow\" src=\"https:\/\/codepen.io\/ainalem\/embed\/rGvaaO?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/ainalem\/pen\/rGvaaO'>Geometrical Birds &#8211; slideshow<\/a> by Mikael Ainalem<br \/>\n  (<a href='https:\/\/codepen.io\/ainalem'>@ainalem<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Mikael Ainalem <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/ainalem\/pen\/rGvaaO\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>12.<\/span> Tweenmax slideshow <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Tweenmax slideshow\" src=\"https:\/\/codepen.io\/astrixsz\/embed\/zBXvWx?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/astrixsz\/pen\/zBXvWx'>Tweenmax slideshow<\/a> by Matheus Verissimo<br \/>\n  (<a href='https:\/\/codepen.io\/astrixsz'>@astrixsz<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Matheus Verissimo <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/astrixsz\/pen\/zBXvWx\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>13.<\/span> Slideshow Presentation <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Slideshow presentation\" src=\"https:\/\/codepen.io\/something-strange\/embed\/NNNeoN?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/something-strange\/pen\/NNNeoN'>Slideshow presentation<\/a> by Something Strange<br \/>\n  (<a href='https:\/\/codepen.io\/something-strange'>@something-strange<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Something Strange <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/something-strange\/pen\/NNNeoN\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>14.<\/span> Parallax Slideshow <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Parallax Slideshow\" src=\"https:\/\/codepen.io\/bcarvalho\/embed\/WXmwBq?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/bcarvalho\/pen\/WXmwBq'>Parallax Slideshow<\/a> by Bruno Carvalho<br \/>\n  (<a href='https:\/\/codepen.io\/bcarvalho'>@bcarvalho<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Bruno Carvalho <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/bcarvalho\/pen\/WXmwBq\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>15.<\/span> Nautilus Slideshow <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Nautilus Slideshow\" src=\"https:\/\/codepen.io\/npayne\/embed\/LNNrOw?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/npayne\/pen\/LNNrOw'>Nautilus Slideshow<\/a> by Nikolas Payne<br \/>\n  (<a href='https:\/\/codepen.io\/npayne'>@npayne<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Nikolas Payne <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/npayne\/pen\/LNNrOw\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>16.<\/span> Dual Slideshow Demo <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Dual Slideshow Demo\" src=\"https:\/\/codepen.io\/Reklino\/embed\/wawopV?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/Reklino\/pen\/wawopV'>Dual Slideshow Demo<\/a> by Jacob Davidson<br \/>\n  (<a href='https:\/\/codepen.io\/Reklino'>@Reklino<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Jacob Davidson <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/Reklino\/pen\/wawopV\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>17.<\/span> Slideshow Vanilla JS w\/ CSS Transition <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Slideshow Vanilla JS w\/ CSS Transition\" src=\"https:\/\/codepen.io\/RileyAdair\/embed\/ZvyYzr?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/RileyAdair\/pen\/ZvyYzr'>Slideshow Vanilla JS w\/ CSS Transition<\/a> by Riley Adair<br \/>\n  (<a href='https:\/\/codepen.io\/RileyAdair'>@RileyAdair<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Riley Adair <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/RileyAdair\/pen\/ZvyYzr\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>18.<\/span> Fullpage Split-screen Slideshow <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Split-screen Slideshow\" src=\"https:\/\/codepen.io\/seanfree\/embed\/LxPBZy?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/seanfree\/pen\/LxPBZy'>Split-screen Slideshow<\/a> by Sean Free<br \/>\n  (<a href='https:\/\/codepen.io\/seanfree'>@seanfree<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> sean free <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/seanfree\/pen\/LxPBZy\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>19.<\/span> Slideshow Parallax with TweenMax <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Slideshow Parallax with TweenMax\" src=\"https:\/\/codepen.io\/bcarvalho\/embed\/gWPvJB?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/bcarvalho\/pen\/gWPvJB'>Slideshow Parallax with TweenMax<\/a> by Bruno Carvalho<br \/>\n  (<a href='https:\/\/codepen.io\/bcarvalho'>@bcarvalho<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Bruno Carvalho <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/bcarvalho\/pen\/gWPvJB\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>20.<\/span> A slideshow with a blinds transition <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"A slideshow with a blinds transition\" src=\"https:\/\/codepen.io\/stathisg\/embed\/mhGpC?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/stathisg\/pen\/mhGpC'>A slideshow with a blinds transition<\/a> by Stathis<br \/>\n  (<a href='https:\/\/codepen.io\/stathisg'>@stathisg<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Stathis <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/stathisg\/pen\/mhGpC\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n<h4><span>21.<\/span> Full Page Slideshow <\/h4>\n<p><iframe height=\"465\" style=\"width: 100%;\" scrolling=\"no\" title=\"Full Page Slideshow\" src=\"https:\/\/codepen.io\/webinyoureyes\/embed\/dPZWLe?height=265&#038;theme-id=dark&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/webinyoureyes\/pen\/dPZWLe'>Full Page Slideshow<\/a> by webinyoureyes<br \/>\n  (<a href='https:\/\/codepen.io\/webinyoureyes'>@webinyoureyes<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> webinyoureyes <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/codepen.io\/webinyoureyes\/pen\/dPZWLe\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<hr>\n","protected":false},"excerpt":{"rendered":"<p>Latest Collection of free Hand picked Pure Html CSS Slideshow Design With Impressive Transition Effects. Demo and Download the zip (*.zip). 1. double exposure carousel slider See the Pen double exposure carousel slider by Misaki Nakano (@mnmxmx) on CodePen. Author Misaki Nakano demo and code Get Hosting 2. React Slider w\/ Hover Effect See the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[212],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>20 + CSS Slideshow Design - csshint - A designer hub<\/title>\n<meta name=\"description\" content=\"Latest Collection of free Hand picked Pure Html CSS Slideshow Design With Impressive Transition Effects. Demo and Download the zip (*.zip).\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/csshint.com\/css-slideshow\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 + CSS Slideshow Design - csshint - A designer hub\" \/>\n<meta property=\"og:description\" content=\"Latest Collection of free Hand picked Pure Html CSS Slideshow Design With Impressive Transition Effects. Demo and Download the zip (*.zip).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csshint.com\/css-slideshow\/\" \/>\n<meta property=\"og:site_name\" content=\"csshint - A designer hub\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-09T03:03:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-19T10:35:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Layer-Motion-Slideshow.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"703\" \/>\n\t<meta property=\"og:image:height\" content=\"437\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csshint.com\/css-slideshow\/\",\"url\":\"https:\/\/csshint.com\/css-slideshow\/\",\"name\":\"20 + CSS Slideshow Design - csshint - A designer hub\",\"isPartOf\":{\"@id\":\"https:\/\/csshint.com\/#website\"},\"datePublished\":\"2020-06-09T03:03:15+00:00\",\"dateModified\":\"2023-02-19T10:35:34+00:00\",\"author\":{\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed\"},\"description\":\"Latest Collection of free Hand picked Pure Html CSS Slideshow Design With Impressive Transition Effects. Demo and Download the zip (*.zip).\",\"breadcrumb\":{\"@id\":\"https:\/\/csshint.com\/css-slideshow\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csshint.com\/css-slideshow\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csshint.com\/css-slideshow\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csshint.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 + CSS Slideshow Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/csshint.com\/#website\",\"url\":\"https:\/\/csshint.com\/\",\"name\":\"csshint - A designer hub\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/csshint.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/csshint.com\/author\/21232f297a57a5a743894a0e4a801fc3\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"20 + CSS Slideshow Design - csshint - A designer hub","description":"Latest Collection of free Hand picked Pure Html CSS Slideshow Design With Impressive Transition Effects. Demo and Download the zip (*.zip).","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:\/\/csshint.com\/css-slideshow\/","og_locale":"en_US","og_type":"article","og_title":"20 + CSS Slideshow Design - csshint - A designer hub","og_description":"Latest Collection of free Hand picked Pure Html CSS Slideshow Design With Impressive Transition Effects. Demo and Download the zip (*.zip).","og_url":"https:\/\/csshint.com\/css-slideshow\/","og_site_name":"csshint - A designer hub","article_published_time":"2020-06-09T03:03:15+00:00","article_modified_time":"2023-02-19T10:35:34+00:00","og_image":[{"width":703,"height":437,"url":"https:\/\/csshint.com\/wp-content\/uploads\/2020\/06\/Layer-Motion-Slideshow.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/csshint.com\/css-slideshow\/","url":"https:\/\/csshint.com\/css-slideshow\/","name":"20 + CSS Slideshow Design - csshint - A designer hub","isPartOf":{"@id":"https:\/\/csshint.com\/#website"},"datePublished":"2020-06-09T03:03:15+00:00","dateModified":"2023-02-19T10:35:34+00:00","author":{"@id":"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed"},"description":"Latest Collection of free Hand picked Pure Html CSS Slideshow Design With Impressive Transition Effects. Demo and Download the zip (*.zip).","breadcrumb":{"@id":"https:\/\/csshint.com\/css-slideshow\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csshint.com\/css-slideshow\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/csshint.com\/css-slideshow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csshint.com\/"},{"@type":"ListItem","position":2,"name":"20 + CSS Slideshow Design"}]},{"@type":"WebSite","@id":"https:\/\/csshint.com\/#website","url":"https:\/\/csshint.com\/","name":"csshint - A designer hub","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/csshint.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csshint.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/csshint.com\/author\/21232f297a57a5a743894a0e4a801fc3\/"}]}},"_links":{"self":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/1960"}],"collection":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/comments?post=1960"}],"version-history":[{"count":5,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/1960\/revisions"}],"predecessor-version":[{"id":8070,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/1960\/revisions\/8070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/media\/1964"}],"wp:attachment":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/media?parent=1960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/categories?post=1960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/tags?post=1960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}