{"id":63187,"date":"2023-06-26T17:57:01","date_gmt":"2023-06-26T16:57:01","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=63187&#038;preview=true&#038;preview_id=63187"},"modified":"2023-07-27T13:56:20","modified_gmt":"2023-07-27T12:56:20","slug":"css-image-styling","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/","title":{"rendered":"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern"},"content":{"rendered":"<p>Wenn es um <a href=\"https:\/\/kinsta.com\/de\/blog\/responsiven-webdesign\/\">Webdesign<\/a> geht, k\u00f6nnen fesselnde Bilder den Unterschied ausmachen. Bilder spielen eine entscheidende Rolle, wenn es darum geht, ein ansprechendes und einpr\u00e4gsames Nutzererlebnis zu schaffen.<\/p>\n<p>Aber wie kannst du deine Bilder von gew\u00f6hnlich zu au\u00dfergew\u00f6hnlich machen? Hier kommt das Bildstyling ins Spiel. Mit der Macht von <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> kannst du deiner Kreativit\u00e4t freien Lauf lassen und deine Bilder in fesselnde visuelle Elemente verwandeln, die einen bleibenden Eindruck hinterlassen.<\/p>\n<p>In diesem Artikel tauchen wir in die Welt der CSS-Bildgestaltung ein und lernen viele Techniken und Eigenschaften kennen, die deine Webdesign-F\u00e4higkeiten auf ein neues Niveau heben werden.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Wie man Bilder in HTML einf\u00fcgt<\/h2>\n<p>Bevor du ein Bild stylen kannst, musst du es zun\u00e4chst in dein <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a>-Dokument einf\u00fcgen. Dazu kannst du den <code>&lt;img&gt;<\/code> Tag verwenden. Der <code>&lt;img&gt;<\/code> Tag ist ein selbstschlie\u00dfender Tag (er ben\u00f6tigt keinen schlie\u00dfenden Tag). Er hat ein <code>src<\/code> -Attribut, das die <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-url\/\">URL<\/a> oder den Dateipfad des Bildes angibt, das du anzeigen m\u00f6chtest.<\/p>\n<pre><code class=\"language-html\">&lt;img src=\"image.jpg\" alt=\"Description of the image\"&gt;<\/code><\/pre>\n<p>Du kannst auch eine absolute URL oder einen relativen Dateipfad f\u00fcr das Bild angeben.<\/p>\n<pre><code class=\"language-html\">&lt;img src=\"https:\/\/source.unsplash.com\/tMHAmxLyzvA\" alt=\"Boston city skyline\"&gt;<\/code><\/pre>\n<p>Das Attribut <code>alt<\/code> steht f\u00fcr Alternativtext und ist f\u00fcr die Barrierefreiheit unerl\u00e4sslich. Das Tag <code>&lt;img&gt;<\/code> bietet au\u00dferdem zwei optionale Attribute: <code>width<\/code> und <code>height<\/code>. Mit diesen Attributen kannst du die Abmessungen des Bildes in Pixeln angeben.<\/p>\n<pre><code class=\"language-html\">&lt;img src=\"image.jpg\" alt=\"Description of the image\" width=\"300\" height=\"200\"&gt;<\/code><\/pre>\n<p>Es wird jedoch generell empfohlen, die Attribute <code>width<\/code> und <code>height<\/code> nicht zu verwenden, es sei denn, du musst bestimmte Bildma\u00dfe einhalten. Stattdessen kannst du die Gr\u00f6\u00dfe des Bildes mit CSS steuern, was mehr Flexibilit\u00e4t beim <a href=\"https:\/\/kinsta.com\/de\/blog\/responsiven-webdesign\/\">responsiven Design<\/a> bietet.<\/p>\n<pre><code class=\"language-css\">img {\n  height: 200px;\n  width: 700px;\n}<\/code><\/pre>\n<h2>Responsive Image Styling<\/h2>\n<p>Die Anwendung bestimmter Werte f\u00fcr die Attribute <code>width<\/code> und <code>height<\/code> auf ein Bild kann unerw\u00fcnschte Folgen haben, wie z. B. die Komprimierung oder Verzerrung des Bildes. Das gilt vor allem, wenn die angegebenen Ma\u00dfe nicht mit dem urspr\u00fcnglichen Seitenverh\u00e4ltnis des Bildes \u00fcbereinstimmen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/compressed-image-with-width-height.jpg\" alt=\"Komprimiertes Bild\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Komprimiertes Bild<\/figcaption><\/figure>\n<p>Um diese Probleme zu vermeiden und die richtigen Bildproportionen beizubehalten, kommt hier das Responsive Image Styling ins Spiel. Responsive Image Styling sorgt daf\u00fcr, dass sich Bilder an unterschiedliche Bildschirmgr\u00f6\u00dfen anpassen, was f\u00fcr responsives <a href=\"https:\/\/kinsta.com\/de\/blog\/webdesign-prinzipien\/\">Webdesign<\/a> entscheidend ist.<\/p>\n<p>Dies kannst du mit der Eigenschaft <code>max-width<\/code> erreichen, die die maximale Breite eines Bildes begrenzt.<\/p>\n<pre><code class=\"language-css\">img {\n  max-width: 100%;\n  height: auto;\n}<\/code><\/pre>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/responsive-image-with-width-height.jpg\" alt=\"Responsives Bild\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Responsives Bild<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Es gibt einen Unterschied, wenn du <code>width<\/code> und <code>max-width<\/code> auf <code>100%<\/code> einstellst. Wenn du <code>width: 100%<\/code> verwendest, kann das Bild gestreckt oder geschrumpft werden, um sich der Breite des Containers anzupassen, w\u00e4hrend <code>max-width: 100%<\/code> sicherstellt, dass das Bild seine urspr\u00fcngliche Gr\u00f6\u00dfe nicht \u00fcberschreitet, aber immer noch verkleinert werden kann, um in den Container zu passen.<\/p>\n<\/aside>\n\n<p>Du kannst auch <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\">Medienabfragen<\/a> verwenden, um das Bildstyling auf der Grundlage verschiedener Ger\u00e4te-Breakpoints zu \u00e4ndern. Mit Medienabfragen kannst du bestimmte CSS-Regeln anwenden, die von der Bildschirmgr\u00f6\u00dfe, der Ausrichtung und anderen Merkmalen des Ger\u00e4ts abh\u00e4ngen. Ein Beispiel:<\/p>\n<pre><code class=\"language-css\">@media screen and (max-width: 600px) {\n  .my-image {\n    max-width: 50%;\n  }\n}<\/code><\/pre>\n<h2>Object-Fit verwenden, um das Seitenverh\u00e4ltnis beizubehalten und eine Verkleinerung zu vermeiden<\/h2>\n<p>Manchmal gibt es Situationen, in denen du eine bestimmte Breite und H\u00f6he f\u00fcr ein Bild angeben musst. In solchen F\u00e4llen kannst du die CSS-Eigenschaft <code>object-fit<\/code> verwenden, um zu steuern, wie sich das Bild innerhalb der angegebenen Ma\u00dfe verh\u00e4lt.<\/p>\n<p>Mit der Eigenschaft <code>object-fit<\/code> kannst du festlegen, wie ein Bild in seinen Container passen soll, ohne sein Seitenverh\u00e4ltnis zu ver\u00e4ndern. Sie kann verschiedene Werte annehmen, wie z. B.:<\/p>\n<ul>\n<li><strong>fill:<\/strong> Mit diesem Wert wird das Bild gestreckt oder gequetscht, damit es genau in den Container passt, was zu Verzerrungen f\u00fchren kann.<\/li>\n<li><strong>contain:<\/strong> Dieser Wert skaliert das Bild proportional so, dass es ohne Beschneidung in den Container passt und das Seitenverh\u00e4ltnis beibehalten wird. Er stellt sicher, dass das gesamte Bild innerhalb des Containers sichtbar ist, was zu Leerstellen f\u00fchren kann.<\/li>\n<li><strong>cover:<\/strong> Dieser Wert skaliert das Bild proportional so, dass es den Container abdeckt und das Seitenverh\u00e4ltnis beibeh\u00e4lt. Dies kann dazu f\u00fchren, dass die R\u00e4nder des Bildes abgeschnitten werden, um sicherzustellen, dass es den gesamten Container ausf\u00fcllt.<\/li>\n<li><strong>none:<\/strong> Bei diesem Wert wird das Bild weder skaliert noch beschnitten. Das Bild beh\u00e4lt seine urspr\u00fcngliche Gr\u00f6\u00dfe und kann den Container \u00fcberf\u00fcllen.<\/li>\n<\/ul>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/object-fit-image.jpg\" alt=\"Ergebnis f\u00fcr beliebte Objektanpassungsstile\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Ergebnis f\u00fcr beliebte Objektanpassungsstile<\/figcaption><\/figure>\n<p>Hier ist ein Beispiel f\u00fcr die Verwendung der Eigenschaft Objektanpassung:<\/p>\n<pre><code class=\"language-css\">img {\n  width: 300px;\n  height: 300px;\n  object-fit: cover;\n}<\/code><\/pre>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Using object-fit to Maintain Aspect Ratio - Kinsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/oNarJZa?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=oNarJZa#?secret=CJyGEk6eFt\" data-secret=\"CJyGEk6eFt\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Bilder mit abgerundeten Ecken mit CSS erstellen<\/h2>\n<p>Wenn du Bildern abgerundete Ecken hinzuf\u00fcgst, k\u00f6nnen sie weicher und optisch ansprechender aussehen.<\/p>\n<p>Mit CSS kannst du diesen Effekt ganz einfach erreichen, indem du die Eigenschaft <code>border-radius<\/code> auf das Bild anwendest.<\/p>\n<p>Hier erf\u00e4hrst du, wie du Bilder mit abgerundeten Ecken erstellen kannst:<\/p>\n<pre><code class=\"language-css\">img {\n  border-radius: 10px;\n}<\/code><\/pre>\n<p>Im obigen Beispiel setzen wir die Eigenschaft <code>border-radius<\/code> auf <code>10px<\/code>. Passe den Wert nach deinen W\u00fcnschen an, um die Rundung der Ecken zu steuern. Dieser Wert kann deine bevorzugten Einheiten wie z. B. rem, Prozent usw. verwenden.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/rounded-corner-image.jpg\" alt=\"Bild mit abgerundeten Ecken\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Bild mit abgerundeten Ecken<\/figcaption><\/figure>\n<h2>Kreisf\u00f6rmige Bilder mit CSS erstellen<\/h2>\n<p>Um deine Bilder perfekt rund zu machen, kombiniere die Eigenschaft <code>border-radius<\/code> mit gleichen Breiten- und H\u00f6henma\u00dfen.<\/p>\n<p>Hier erf\u00e4hrst du, wie du runde Bilder erstellen kannst:<\/p>\n<pre><code class=\"language-css\">img {\n  border-radius: 50%;\n  width: 200px;\n  height: 200px;\n}<\/code><\/pre>\n<p>Im obigen Beispiel ist die Eigenschaft <code>border-radius<\/code> auf <code>50%<\/code> eingestellt, wodurch ein Kreis entsteht, indem die Randkurve die H\u00e4lfte der Breite oder H\u00f6he des Bildes ausmacht.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Die Attribute <code>width<\/code> und <code>height<\/code> m\u00fcssen die gleichen Abmessungen haben, um ein perfektes kreisf\u00f6rmiges Bild zu erhalten.<\/p>\n<\/aside>\n\n<p>Du kannst auch die Eigenschaft <code>clip-path<\/code> verwenden. Sie erm\u00f6glicht es dir, einen Beschneidungspfad f\u00fcr ein Element zu definieren und so einzigartige Formen zu schaffen.<\/p>\n<p>Hier ist ein Beispiel f\u00fcr ein Bild, das zu einem Kreis beschnitten wurde:<\/p>\n<pre><code class=\"language-css\">img {\n  clip-path: circle(50%);\n  width: 200px;\n  height: 200px;\n}<\/code><\/pre>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Creating Circular Images with CSS - Kinsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/rNqEoPv?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=rNqEoPv#?secret=N47FauZUEs\" data-secret=\"N47FauZUEs\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Bilder mit CSS zentrieren<\/h2>\n<p>Das Ausrichten von Bildern in der Mitte ihres Containers ist eine g\u00e4ngige Praxis im <a href=\"https:\/\/kinsta.com\/de\/thema\/webdesign\/\">Webdesign<\/a>. Es gibt viele M\u00f6glichkeiten, dies zu erreichen. Eine davon ist, die Eigenschaft <code>display<\/code> des Bildes auf <code>block<\/code> zu setzen und <code>margin: 0 auto<\/code> anzuwenden, was das Bild horizontal in seinem Container zentriert.<\/p>\n<pre><code class=\"language-css\">img {\n  display: block;\n  margin: 0 auto;\n  width: 700px;\n}<\/code><\/pre>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/centered-image.jpg\" alt=\"Zentriertes Bild\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Zentriertes Bild<\/figcaption><\/figure>\n<h2>Transparente Bilder erstellen<\/h2>\n<p>Du kannst CSS verwenden, um den gew\u00fcnschten Transparenzeffekt anzuwenden und ein Bild transparent zu machen. Mit der Eigenschaft <code>opacity<\/code> kannst du den Transparenzgrad eines Elements, auch eines Bildes, steuern.<\/p>\n<p>Ein Wert von <code>1<\/code> steht f\u00fcr volle Deckkraft (vollst\u00e4ndig sichtbar), w\u00e4hrend <code>0<\/code> f\u00fcr volle Transparenz (vollst\u00e4ndig unsichtbar) steht.<\/p>\n<pre><code class=\"language-css\">img {\n  opacity: 0.5;\n}<\/code><\/pre>\n<p>Die Deckkraft des Bildes im obigen Code ist auf <code>0.5<\/code> eingestellt, was zu einem halbtransparenten Effekt f\u00fchrt. Du kannst den Wert der Deckkraft anpassen, um den gew\u00fcnschten Grad der Transparenz zu erreichen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/transparent-image.jpg\" alt=\"Transparentes Bild\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Transparentes Bild<\/figcaption><\/figure>\n<h2>Text auf Bildern platzieren<\/h2>\n<p>Wenn du Text auf Bildern platzierst, kannst du optisch ansprechende und informative Designs erstellen. Um Text \u00fcber einem Bild zu platzieren, kannst du eine Kombination aus CSS-Positionierung und <code>z-index<\/code> verwenden.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-css\"> \/\/ HTML\n&lt;div class=\"image-container\"&gt;\n  &lt;img src=\"https:\/\/source.unsplash.com\/tMHAmxLyzvA\" alt=\"Boston city skyline\" &gt;\n  &lt;div class=\"image-text\"&gt;Welcome to Kinsta&lt;\/div&gt;\n&lt;\/div&gt;\n\n\/\/ CSS\n.image-container {\n  position: relative;\n}\n\n\n.image-text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n  color: white;\n  font-size: 20px;\n  font-weight: bold;\n}<\/code><\/pre>\n<p>Im obigen Code dient <code>image-container<\/code> <code>div<\/code> als Container sowohl f\u00fcr das Bild als auch f\u00fcr die Text\u00fcberlagerung. Die Eigenschaft <code>position: relative<\/code> wird auf den Container angewendet, um einen Positionierungskontext zu erstellen. Die Klasse <code>image-text<\/code> wird dann verwendet, um den Text mithilfe von <code>position: absolute<\/code> absolut innerhalb des Containers zu positionieren, und die Eigenschaften <code>top<\/code>, <code>left<\/code> und <code>transform<\/code>, um ihn zu zentrieren. Die Eigenschaft <code>z-index<\/code> sorgt daf\u00fcr, dass der Text oberhalb des Bildes erscheint, und du kannst das Aussehen des Textes mit Farbe, Schriftgr\u00f6\u00dfe und Schriftgrad weiter anpassen.<\/p>\n<p>Bitte beachte, dass die spezifischen Werte f\u00fcr die Positionierung und das Styling an deine Designvorlieben und Anforderungen angepasst werden k\u00f6nnen.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Placing Text on Images - Kinsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/WNaqPbE?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=WNaqPbE#?secret=z4W8niroga\" data-secret=\"z4W8niroga\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Bilder spiegeln: Gespiegelte Effekte erzeugen<\/h2>\n<p>Das Spiegeln von Bildern kann deinem <a href=\"https:\/\/kinsta.com\/de\/blog\/web-design-kurse\/\">Webdesign<\/a> ein interessantes visuelles Element hinzuf\u00fcgen. Egal, ob du einen Spiegeleffekt erzeugen oder ein Bild vertikal oder horizontal spiegeln m\u00f6chtest, CSS bietet einfache Techniken, um diesen Effekt zu erzielen.<\/p>\n<h3>Horizontales Spiegeln<\/h3>\n<p>Um ein Bild horizontal zu spiegeln, kannst du die Eigenschaft transform mit der Funktion <code>scaleX()<\/code> verwenden. Der Wert <code>scaleX(-1)<\/code> spiegelt das Bild entlang der horizontalen Achse.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleX(-1);\n}<\/code><\/pre>\n<h3>Vertikales Spiegeln<\/h3>\n<p>Um ein Bild vertikal zu spiegeln, kannst du die Eigenschaft transform mit der Funktion <code>scaleY()<\/code> verwenden. Der Wert <code>scaleY(-1)<\/code> spiegelt das Bild entlang der vertikalen Achse.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleY(-1);\n}<\/code><\/pre>\n<h3>Diagonales Spiegeln<\/h3>\n<p>Um einen diagonalen Spiegeleffekt zu erzeugen, kombinierst du die Funktionen <code>scaleX()<\/code> und <code>scaleY()<\/code> mit der Eigenschaft <code>transform<\/code>.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleX(-1) scaleY(-1);\n}<\/code><\/pre>\n<p>Im obigen Code wird das Bild horizontal und vertikal gespiegelt, sodass ein diagonaler Spiegeleffekt entsteht.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/flipping-images-css.jpg\" alt=\"Horizontales, vertikales und diagonales Spiegeln von Bildern\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Horizontales, vertikales und diagonales Spiegeln von Bildern<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Beim Spiegeln von Bildern mit CSS wird die eigentliche Bilddatei nicht ver\u00e4ndert, sondern nur die Art und Weise, wie sie auf der Webseite angezeigt wird. Wenn du das Bild dauerhaft spiegeln willst, musst du es mit einem Bearbeitungswerkzeug bearbeiten.<\/p>\n<\/aside>\n\n<h2>Hinzuf\u00fcgen von Filtern zu Bildern: Visuelle Effekte verst\u00e4rken<\/h2>\n<p>Mit Filtern kannst du das Aussehen und die Wirkung von Bildern ver\u00e4ndern und einzigartige visuelle Effekte erzielen. CSS bietet eine Reihe von Filtereigenschaften, die du auf Bilder anwenden kannst, um Helligkeit, Kontrast, S\u00e4ttigung und vieles mehr zu ver\u00e4ndern.<\/p>\n<p>Du kannst die Eigenschaft <code>filter<\/code> verwenden, um einen Filter auf ein Bild anzuwenden. Diese Eigenschaft l\u00e4sst verschiedene Filterfunktionen zu, die jeweils unterschiedliche Aspekte des Bildes ver\u00e4ndern.<\/p>\n<pre><code class=\"language-css\">img {\n  filter: brightness(150%);\n}<\/code><\/pre>\n<p>Im obigen Code wird die Funktion <code>brightness(150%)<\/code> auf das Bild angewendet. Dadurch wird die Helligkeit des Bildes um <strong>150 %<\/strong> erh\u00f6ht.<\/p>\n<h3>H\u00e4ufig verwendete Filterfunktionen<\/h3>\n<p>Hier sind einige h\u00e4ufig verwendete Filterfunktionen:<\/p>\n<ul>\n<li><code>brightness()<\/code>: Stellt die Helligkeit des Bildes ein.<\/li>\n<li><code>contrast()<\/code>: \u00c4ndert den Kontrast des Bildes.<\/li>\n<li><code>saturate()<\/code>: \u00c4ndert den S\u00e4ttigungsgrad des Bildes.<\/li>\n<li><code>grayscale()<\/code>: Wandelt das Bild in Graustufen um.<\/li>\n<li><code>blur()<\/code>: Wendet einen Unsch\u00e4rfeeffekt auf das Bild an.<\/li>\n<li><code>sepia()<\/code>: Wendet einen Sepia-Effekt auf das Bild an.<\/li>\n<\/ul>\n<p>Du kannst mit verschiedenen Filterfunktionen und -werten experimentieren, um die gew\u00fcnschten visuellen Effekte zu erzielen. Wenn du mehrere Filter kombinierst, kannst du auch kompliziertere Transformationen erzielen.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Adding Filters to Images - Kinsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/WNaqWJG?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=WNaqWJG#?secret=iZVDp19JF5\" data-secret=\"iZVDp19JF5\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Nicht alle Filter werden in allen Browsern unterst\u00fctzt. Bevor du einen bestimmten Filter verwendest, \u00fcberpr\u00fcfe seine Kompatibilit\u00e4t mit verschiedenen Browsern auf Plattformen wie <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">caniuse.com<\/a>.<\/p>\n<\/aside>\n\n<h2>Hover-Overlays f\u00fcr Bilder erstellen<\/h2>\n<p>Hover Overlays auf Bildern k\u00f6nnen deiner Website Interaktivit\u00e4t und visuelles Interesse verleihen. Wenn ein Nutzer mit dem Mauszeiger \u00fcber ein Bild f\u00e4hrt, kann ein \u00dcberlagerungseffekt, wie z. B. eine Farb\u00fcberlagerung oder eine Textbeschriftung, angewendet werden.<\/p>\n<p>CSS bietet verschiedene Techniken, um Hover-Overlays zu erzielen; eine M\u00f6glichkeit ist die Verwendung von CSS-\u00dcberg\u00e4ngen. Indem du bestimmte Eigenschaften eines Elements \u00fcberblendest, kannst du die Ver\u00e4nderungen beim Schweben des Mauszeigers \u00fcber einem Bildes nahtlos animieren.<\/p>\n<pre><code class=\"language-css\">\/\/ HTML\n&lt;div class=\"image-container\"&gt;\n  &lt;img src=\"image.jpg\" alt=\"Description of the image\"&gt;\n  &lt;div class=\"overlay\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n\/\/ CSS\n.image-container {\n  position: relative;\n  display: inline-block;\n}\n.overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n.image-container:hover .overlay {\n  opacity: 1;\n}<\/code><\/pre>\n<p>Im obigen Code umh\u00fcllt ein <code>.image-container<\/code> Element das Bild und ein <code>.overlay<\/code> Element. Die \u00dcberlagerung ist zun\u00e4chst transparent (<code>opacity: 0<\/code>) und bedeckt das gesamte Bild. Wenn du mit dem Mauszeiger \u00fcber <code>.image-container<\/code> f\u00e4hrst, wird die Deckkraft von <code>.overlay<\/code> auf <code>1<\/code> ge\u00e4ndert und die Farb\u00fcberlagerung wird sichtbar.<\/p>\n<p>Um den gew\u00fcnschten visuellen Effekt zu erzielen, kannst du die \u00dcberlagerung anpassen, indem du die Eigenschaften <code>background-color<\/code> und Deckkraft einstellst.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Creating Hover Overlays on Images - KInsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/MWPMdpB?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=MWPMdpB#?secret=YZr3SksU6K\" data-secret=\"YZr3SksU6K\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Die Gestaltung von Bildern mit CSS er\u00f6ffnet dir eine Welt voller kreativer M\u00f6glichkeiten, mit denen du die visuelle Attraktivit\u00e4t und Interaktivit\u00e4t deiner Webseiten verbessern kannst.<\/p>\n<p>Wenn du Bilder mit CSS gestaltest, solltest du immer auf Zug\u00e4nglichkeit, Reaktionsf\u00e4higkeit und <a href=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\">Leistung<\/a> achten.<\/p>\n<p><em>Welchen <\/em><em>CSS-Bildstil verwendest du am h\u00e4ufigsten? Welcher Stil interessiert dich am meisten? Lass es uns in den Kommentaren wissen.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn es um Webdesign geht, k\u00f6nnen fesselnde Bilder den Unterschied ausmachen. Bilder spielen eine entscheidende Rolle, wenn es darum geht, ein ansprechendes und einpr\u00e4gsames Nutzererlebnis zu &#8230;<\/p>\n","protected":false},"author":287,"featured_media":63188,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[990],"class_list":["post-63187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-webentwicklung-sprachen"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Verbessere die visuelle Attraktivit\u00e4t, kreiere atemberaubende Effekte und beeindrucke deine Besucher mit unserem umfassenden Leitfaden zum CSS-Bildstyling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern\" \/>\n<meta property=\"og:description\" content=\"Verbessere die visuelle Attraktivit\u00e4t, kreiere atemberaubende Effekte und beeindrucke deine Besucher mit unserem umfassenden Leitfaden zum CSS-Bildstyling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-26T16:57:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T12:56:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Verbessere die visuelle Attraktivit\u00e4t, kreiere atemberaubende Effekte und beeindrucke deine Besucher mit unserem umfassenden Leitfaden zum CSS-Bildstyling.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern\",\"datePublished\":\"2023-06-26T16:57:01+00:00\",\"dateModified\":\"2023-07-27T12:56:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/\"},\"wordCount\":1849,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/\",\"name\":\"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg\",\"datePublished\":\"2023-06-26T16:57:01+00:00\",\"dateModified\":\"2023-07-27T12:56:20+00:00\",\"description\":\"Verbessere die visuelle Attraktivit\u00e4t, kreiere atemberaubende Effekte und beeindrucke deine Besucher mit unserem umfassenden Leitfaden zum CSS-Bildstyling.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web-Entwicklungssprachen\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/webentwicklung-sprachen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern - Kinsta\u00ae","description":"Verbessere die visuelle Attraktivit\u00e4t, kreiere atemberaubende Effekte und beeindrucke deine Besucher mit unserem umfassenden Leitfaden zum CSS-Bildstyling.","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:\/\/kinsta.com\/de\/blog\/css-image-styling\/","og_locale":"de_DE","og_type":"article","og_title":"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern","og_description":"Verbessere die visuelle Attraktivit\u00e4t, kreiere atemberaubende Effekte und beeindrucke deine Besucher mit unserem umfassenden Leitfaden zum CSS-Bildstyling.","og_url":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-06-26T16:57:01+00:00","article_modified_time":"2023-07-27T12:56:20+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Verbessere die visuelle Attraktivit\u00e4t, kreiere atemberaubende Effekte und beeindrucke deine Besucher mit unserem umfassenden Leitfaden zum CSS-Bildstyling.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern","datePublished":"2023-06-26T16:57:01+00:00","dateModified":"2023-07-27T12:56:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/"},"wordCount":1849,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/","url":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/","name":"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg","datePublished":"2023-06-26T16:57:01+00:00","dateModified":"2023-07-27T12:56:20+00:00","description":"Verbessere die visuelle Attraktivit\u00e4t, kreiere atemberaubende Effekte und beeindrucke deine Besucher mit unserem umfassenden Leitfaden zum CSS-Bildstyling.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/css-image-styling\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-image-styling.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/css-image-styling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Web-Entwicklungssprachen","item":"https:\/\/kinsta.com\/de\/thema\/webentwicklung-sprachen\/"},{"@type":"ListItem","position":3,"name":"CSS Image Styling: Optische Attraktivit\u00e4t mit Styling verbessern"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=63187"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63187\/revisions"}],"predecessor-version":[{"id":63265,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63187\/revisions\/63265"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63187\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/63188"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=63187"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=63187"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=63187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}