{"id":864,"date":"2018-03-28T11:22:36","date_gmt":"2018-03-28T09:22:36","guid":{"rendered":"https:\/\/www.benjaminsimier.com\/double-vue-projet-css\/"},"modified":"2019-11-07T12:18:47","modified_gmt":"2019-11-07T11:18:47","slug":"double-view-css-project","status":"publish","type":"post","link":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/","title":{"rendered":"Double view (CSS project)"},"content":{"rendered":"\n<p>A little while ago, I realized a\u00a0<strong>personal project<\/strong>\u00a0that I would like to share with you.<\/p>\n\n\n\n<p>The idea was to display on a web site and in full screen two views so that<strong>\u00a0the visitor can choose<\/strong>\u00a0to access the content on the right or the content on the left \u2026 Until then, no problem, just separate a page in two!<br>Yes, but, I wish it was an animation when the cursor was passing \u2026 I also wanted to use\u00a0<strong>only CSS<\/strong>, not JavaScript.<\/p>\n\n\n\n<p><em>Don\u2019t hesitate to follow me on\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/benjaminsimier\/\" target=\"_blank\">Codepen<\/a>\u00a0!<\/em><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/benjaminsimier\/full\/WMyQJK\" target=\"_blank\">Display the result in full screen<\/a><\/p>\n\n\n<p class='codepen'  data-height='415' data-theme-id='0' data-slug-hash='WMyQJK' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen 2 views with mouseover (Only CSS) by Benjamin Simier (@benjaminsimier) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A little while ago, I realized a\u00a0personal project\u00a0that I would like to share with you. The idea was to display on a web site and in full screen two views so that\u00a0the visitor can choose\u00a0to access the content on the right or the content on the left \u2026 Until then, no problem, just separate a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":749,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[54,55,56],"class_list":["post-864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-en","tag-codepen-en","tag-css-en","tag-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Double view (CSS project) - Benjamin Simier<\/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:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Double view (CSS project)\" \/>\n<meta property=\"og:description\" content=\"A little while ago, I realized a\u00a0personal project\u00a0that I would like to share with you. The idea was to display on a web site and in full screen two views so that\u00a0the visitor can choose\u00a0to access the content on the right or the content on the left \u2026 Until then, no problem, just separate a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/\" \/>\n<meta property=\"og:site_name\" content=\"Benjamin Simier\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BSimierWeb\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/BSimierWeb\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-28T09:22:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-07T11:18:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/article-double-vue.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"482\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Benjamin Simier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin Simier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/\"},\"author\":{\"name\":\"Benjamin Simier\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#\\\/schema\\\/person\\\/9791a71b2543b7cd272bf22c3edd1fd5\"},\"headline\":\"Double view (CSS project)\",\"datePublished\":\"2018-03-28T09:22:36+00:00\",\"dateModified\":\"2019-11-07T11:18:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/\"},\"wordCount\":130,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#\\\/schema\\\/person\\\/9791a71b2543b7cd272bf22c3edd1fd5\"},\"image\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/article-double-vue.jpg\",\"keywords\":[\"codepen\",\"css\",\"development\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/\",\"url\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/\",\"name\":\"Double view (CSS project) - Benjamin Simier\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/article-double-vue.jpg\",\"datePublished\":\"2018-03-28T09:22:36+00:00\",\"dateModified\":\"2019-11-07T11:18:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/article-double-vue.jpg\",\"contentUrl\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/article-double-vue.jpg\",\"width\":1000,\"height\":482},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/double-view-css-project\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Double view (CSS project)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#website\",\"url\":\"https:\\\/\\\/www.benjaminsimier.com\\\/\",\"name\":\"Benjamin Simier\",\"description\":\"UI\\\/UX designer &amp; d\u00e9veloppeur front-end\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#\\\/schema\\\/person\\\/9791a71b2543b7cd272bf22c3edd1fd5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.benjaminsimier.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#\\\/schema\\\/person\\\/9791a71b2543b7cd272bf22c3edd1fd5\",\"name\":\"Benjamin Simier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Perso_4.jpeg\",\"url\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Perso_4.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Perso_4.jpeg\",\"width\":872,\"height\":1200,\"caption\":\"Benjamin Simier\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Perso_4.jpeg\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/BSimierWeb\",\"https:\\\/\\\/www.instagram.com\\\/benjamin_simier\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/benjaminsimier\\\/\"],\"url\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Double view (CSS project) - Benjamin Simier","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:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/","og_locale":"en_US","og_type":"article","og_title":"Double view (CSS project)","og_description":"A little while ago, I realized a\u00a0personal project\u00a0that I would like to share with you. The idea was to display on a web site and in full screen two views so that\u00a0the visitor can choose\u00a0to access the content on the right or the content on the left \u2026 Until then, no problem, just separate a [&hellip;]","og_url":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/","og_site_name":"Benjamin Simier","article_publisher":"https:\/\/www.facebook.com\/BSimierWeb","article_author":"https:\/\/www.facebook.com\/BSimierWeb","article_published_time":"2018-03-28T09:22:36+00:00","article_modified_time":"2019-11-07T11:18:47+00:00","og_image":[{"width":1000,"height":482,"url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/article-double-vue.jpg","type":"image\/jpeg"}],"author":"Benjamin Simier","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Benjamin Simier","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/#article","isPartOf":{"@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/"},"author":{"name":"Benjamin Simier","@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/9791a71b2543b7cd272bf22c3edd1fd5"},"headline":"Double view (CSS project)","datePublished":"2018-03-28T09:22:36+00:00","dateModified":"2019-11-07T11:18:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/"},"wordCount":130,"commentCount":0,"publisher":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/9791a71b2543b7cd272bf22c3edd1fd5"},"image":{"@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/#primaryimage"},"thumbnailUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/article-double-vue.jpg","keywords":["codepen","css","development"],"articleSection":["Webdesign"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/","url":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/","name":"Double view (CSS project) - Benjamin Simier","isPartOf":{"@id":"https:\/\/www.benjaminsimier.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/#primaryimage"},"image":{"@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/#primaryimage"},"thumbnailUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/article-double-vue.jpg","datePublished":"2018-03-28T09:22:36+00:00","dateModified":"2019-11-07T11:18:47+00:00","breadcrumb":{"@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/#primaryimage","url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/article-double-vue.jpg","contentUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/article-double-vue.jpg","width":1000,"height":482},{"@type":"BreadcrumbList","@id":"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.benjaminsimier.com\/en\/home\/"},{"@type":"ListItem","position":2,"name":"Double view (CSS project)"}]},{"@type":"WebSite","@id":"https:\/\/www.benjaminsimier.com\/#website","url":"https:\/\/www.benjaminsimier.com\/","name":"Benjamin Simier","description":"UI\/UX designer &amp; d\u00e9veloppeur front-end","publisher":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/9791a71b2543b7cd272bf22c3edd1fd5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.benjaminsimier.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/9791a71b2543b7cd272bf22c3edd1fd5","name":"Benjamin Simier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg","url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg","contentUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg","width":872,"height":1200,"caption":"Benjamin Simier"},"logo":{"@id":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg"},"sameAs":["https:\/\/www.facebook.com\/BSimierWeb","https:\/\/www.instagram.com\/benjamin_simier\/","https:\/\/www.linkedin.com\/in\/benjaminsimier\/"],"url":"https:\/\/www.benjaminsimier.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/comments?post=864"}],"version-history":[{"count":1,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/864\/revisions"}],"predecessor-version":[{"id":865,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/864\/revisions\/865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/media\/749"}],"wp:attachment":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/media?parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/categories?post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/tags?post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}