{"id":842,"date":"2018-09-12T10:48:40","date_gmt":"2018-09-12T08:48:40","guid":{"rendered":"https:\/\/www.benjaminsimier.com\/lines-animation-with-mouse-over-css-only\/"},"modified":"2019-11-07T11:59:28","modified_gmt":"2019-11-07T10:59:28","slug":"lines-animation-with-mouse-over-css-only","status":"publish","type":"post","link":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/","title":{"rendered":"Lines animation with mouse over (CSS only)"},"content":{"rendered":"\n<p>As you know, I like to share my creations CodePen with you that\u2019s why today I present you my new realization.<\/p>\n\n\n\n<p>When you move your mouse cursor over the image, the background splits into two parts. Difficult to explain, the simplest is that you try with the example below.<br>This project does not use javascript, I chose to make it entirely in CSS.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/benjaminsimier\/pen\/wxRdGw\" target=\"_blank\">Here is the direct link to the CodePen project<\/a><\/p>\n\n\n<p class='codepen'  data-height='426' data-theme-id='0' data-slug-hash='wxRdGw' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Lines animation with mouse over (CSS only) by Benjamin Simier (@benjaminsimier) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>As you know, I like to share my creations CodePen with you that\u2019s why today I present you my new realization. When you move your mouse cursor over the image, the background splits into two parts. Difficult to explain, the simplest is that you try with the example below.This project does not use javascript, I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":688,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[55,56],"class_list":["post-842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-en","tag-css-en","tag-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Lines animation with mouse over (CSS only) - 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\/lines-animation-with-mouse-over-css-only\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lines animation with mouse over (CSS only)\" \/>\n<meta property=\"og:description\" content=\"As you know, I like to share my creations CodePen with you that\u2019s why today I present you my new realization. When you move your mouse cursor over the image, the background splits into two parts. Difficult to explain, the simplest is that you try with the example below.This project does not use javascript, I [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/\" \/>\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-09-12T08:48:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-07T10:59:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/cover-line-projet.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"751\" \/>\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\\\/lines-animation-with-mouse-over-css-only\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/\"},\"author\":{\"name\":\"Benjamin Simier\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#\\\/schema\\\/person\\\/9791a71b2543b7cd272bf22c3edd1fd5\"},\"headline\":\"Lines animation with mouse over (CSS only)\",\"datePublished\":\"2018-09-12T08:48:40+00:00\",\"dateModified\":\"2019-11-07T10:59:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/\"},\"wordCount\":111,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#\\\/schema\\\/person\\\/9791a71b2543b7cd272bf22c3edd1fd5\"},\"image\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cover-line-projet.jpg\",\"keywords\":[\"css\",\"development\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/\",\"url\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/\",\"name\":\"Lines animation with mouse over (CSS only) - Benjamin Simier\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cover-line-projet.jpg\",\"datePublished\":\"2018-09-12T08:48:40+00:00\",\"dateModified\":\"2019-11-07T10:59:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cover-line-projet.jpg\",\"contentUrl\":\"https:\\\/\\\/www.benjaminsimier.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cover-line-projet.jpg\",\"width\":1200,\"height\":751},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/lines-animation-with-mouse-over-css-only\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.benjaminsimier.com\\\/en\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lines animation with mouse over (CSS only)\"}]},{\"@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":"Lines animation with mouse over (CSS only) - 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\/lines-animation-with-mouse-over-css-only\/","og_locale":"en_US","og_type":"article","og_title":"Lines animation with mouse over (CSS only)","og_description":"As you know, I like to share my creations CodePen with you that\u2019s why today I present you my new realization. When you move your mouse cursor over the image, the background splits into two parts. Difficult to explain, the simplest is that you try with the example below.This project does not use javascript, I [&hellip;]","og_url":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/","og_site_name":"Benjamin Simier","article_publisher":"https:\/\/www.facebook.com\/BSimierWeb","article_author":"https:\/\/www.facebook.com\/BSimierWeb","article_published_time":"2018-09-12T08:48:40+00:00","article_modified_time":"2019-11-07T10:59:28+00:00","og_image":[{"width":1200,"height":751,"url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/cover-line-projet.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\/lines-animation-with-mouse-over-css-only\/#article","isPartOf":{"@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/"},"author":{"name":"Benjamin Simier","@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/9791a71b2543b7cd272bf22c3edd1fd5"},"headline":"Lines animation with mouse over (CSS only)","datePublished":"2018-09-12T08:48:40+00:00","dateModified":"2019-11-07T10:59:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/"},"wordCount":111,"commentCount":0,"publisher":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/9791a71b2543b7cd272bf22c3edd1fd5"},"image":{"@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/#primaryimage"},"thumbnailUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/cover-line-projet.jpg","keywords":["css","development"],"articleSection":["Webdesign"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/","url":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/","name":"Lines animation with mouse over (CSS only) - Benjamin Simier","isPartOf":{"@id":"https:\/\/www.benjaminsimier.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/#primaryimage"},"image":{"@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/#primaryimage"},"thumbnailUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/cover-line-projet.jpg","datePublished":"2018-09-12T08:48:40+00:00","dateModified":"2019-11-07T10:59:28+00:00","breadcrumb":{"@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/#primaryimage","url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/cover-line-projet.jpg","contentUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/cover-line-projet.jpg","width":1200,"height":751},{"@type":"BreadcrumbList","@id":"https:\/\/www.benjaminsimier.com\/en\/lines-animation-with-mouse-over-css-only\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.benjaminsimier.com\/en\/home\/"},{"@type":"ListItem","position":2,"name":"Lines animation with mouse over (CSS only)"}]},{"@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\/842","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=842"}],"version-history":[{"count":1,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/842\/revisions"}],"predecessor-version":[{"id":843,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/842\/revisions\/843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/media\/688"}],"wp:attachment":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/media?parent=842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/categories?post=842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/tags?post=842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}