{"id":8217,"date":"2017-05-16T08:10:26","date_gmt":"2017-05-16T06:10:26","guid":{"rendered":"https:\/\/waltersblog.ch\/2017\/05\/16\/graustufen-bilder-farbig-werden-lassen\/"},"modified":"2017-05-16T08:10:26","modified_gmt":"2017-05-16T06:10:26","slug":"graustufen-bilder-farbig-werden-lassen","status":"publish","type":"post","link":"https:\/\/walterlernt.ch\/blog\/graustufen-bilder-farbig-werden-lassen\/","title":{"rendered":"Graustufen-Bilder farbig werden lassen"},"content":{"rendered":"<p>Manchmal passen die zur Verf\u00fcgung stehenden Bilder nicht ideal zusammen. Sie wurden nicht am gleichen Ort mit den gleichen Kameras und Einstellungen aufgenommen.<\/p>\n<p>Das kann man mit CSS-Filtern etwas optimieren, zum Beispiel: Bilder k\u00f6nnen in Graustufen dargestellt, wenn man mit der Maus \u00fcber ein Bild f\u00e4hrt, wird das Bild farbig. Das verhindert, dass mehr als ein Bild auf einmal farbig ist.<\/p>\n<p>Nat\u00fcrlich w\u00e4re die beste L\u00f6sung einen perfekten Satz an Bildern zu haben. Das ist aber leider nicht immer machbar. Ich hoffe, dass diese Variante hilft!<\/p>\n<p>Der Code, der im Video dazu verwendet wird, kann hier kopiert werden. Um zu sehen, was genau damit zu tun ist, schau dir bitte das kurze Video an!<\/p>\n<h2>CSS-Code aus dem Video<\/h2>\n<p>Keine Angst, du wirst nicht mit gef\u00e4hrlichem Code konfrontiert!<\/p>\n<pre>.bildeffekt{\n\u00a0\u00a0 \u00a0-webkit-filter: grayscale(100%) blur(2px);\n\u00a0\u00a0 \u00a0filter: grayscale(100%) blur(2px);\n}\n\n.bildeffekt:hover{\n\u00a0\u00a0 \u00a0-webkit-filter: grayscale(0%) brightness(120%);\n\u00a0\u00a0 \u00a0filter: grayscale(0%) brightness(120%);\n}<\/pre>\n<h2>Video: Graustufen-Bilder werden farbig beim &#8220;Hover-Effekt&#8221;<\/h2>\n<p><iframe loading=\"lazy\" title=\"filter\" src=\"https:\/\/player.vimeo.com\/video\/217630034?dnt=1&amp;app_id=122963\" width=\"500\" height=\"290\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bilder k\u00f6nnen in Graustufen dargestellt, wenn man mit der Maus \u00fcber ein Bild f\u00e4hrt, wird das Bild farbig. Das verhindert, dass mehr als ein Bild auf einmal farbig ist.<\/p>\n","protected":false},"author":1,"featured_media":83168,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264,263],"tags":[31,27,83,20],"class_list":["post-8217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-kreativitaet","category-wordpress-webdesign","tag-css","tag-technik","tag-video-und-foto","tag-websites-und-technik"],"_links":{"self":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/8217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/comments?post=8217"}],"version-history":[{"count":0,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/8217\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/media\/83168"}],"wp:attachment":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/media?parent=8217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/categories?post=8217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/tags?post=8217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}