{"id":67259,"date":"2023-06-26T19:00:20","date_gmt":"2023-06-26T17:00:20","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=67259&#038;preview=true&#038;preview_id=67259"},"modified":"2025-01-17T13:49:15","modified_gmt":"2025-01-17T12:49:15","slug":"estilo-de-imagen-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/","title":{"rendered":"Estilo de Imagen CSS: Mejorar el Atractivo Visual con Estilo"},"content":{"rendered":"<p>Cuando se trata de <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/\">dise\u00f1o web<\/a>, los elementos visuales cautivadores pueden marcar la diferencia. Las im\u00e1genes desempe\u00f1an un papel crucial en la creaci\u00f3n de una experiencia de usuario atractiva y memorable.<\/p>\n<p>Pero, \u00bfc\u00f3mo hacer que tus im\u00e1genes pasen de ordinarias a extraordinarias? Aqu\u00ed es donde entra en juego el estilo de imagen. Con el poder del <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> a tu alcance, puedes dar rienda suelta a tu creatividad y transformar tus im\u00e1genes en elementos visuales cautivadores que dejen una impresi\u00f3n duradera.<\/p>\n<p>En este art\u00edculo, nos sumergiremos en el mundo del estilo de imagen CSS, explorando muchas t\u00e9cnicas y propiedades que elevar\u00e1n tus habilidades de dise\u00f1o web a nuevas cotas.<\/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>C\u00f3mo A\u00f1adir Im\u00e1genes en HTML<\/h2>\n<p>Antes de poder dar estilo a una imagen, primero debes a\u00f1adirla a tu documento <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a>. Para ello, puedes utilizar la etiqueta <code>&lt;img&gt;<\/code>. La etiqueta <code>&lt;img&gt;<\/code> es una etiqueta de cierre autom\u00e1tico (no requiere una etiqueta de cierre). Tiene un atributo <code>src<\/code> que especifica la <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-una-url\/\">URL<\/a> o la ruta del archivo de la imagen que quieres mostrar.<\/p>\n<pre><code class=\"language-html\">&lt;img src=\"image.jpg\" alt=\"Description of the image\"&gt;<\/code><\/pre>\n<p>Tambi\u00e9n puedes proporcionar una URL absoluta o una ruta de archivo relativa a la imagen.<\/p>\n<pre><code class=\"language-html\">&lt;img src=\"https:\/\/source.unsplash.com\/tMHAmxLyzvA\" alt=\"Boston city skyline\"&gt;<\/code><\/pre>\n<p>El atributo <code>alt<\/code> significa texto alternativo y es esencial para la accesibilidad. La etiqueta <code>&lt;img&gt;<\/code> tambi\u00e9n proporciona dos atributos opcionales: <code>width<\/code> y <code>height<\/code>. Estos atributos te permiten especificar las dimensiones de la imagen en p\u00edxeles.<\/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>Sin embargo, generalmente se recomienda evitar el uso de los atributos <code>width<\/code> y <code>height<\/code> a menos que necesites mantener unas dimensiones espec\u00edficas de la imagen. En su lugar, puedes utilizar CSS para controlar el tama\u00f1o de la imagen, lo que proporciona m\u00e1s flexibilidad en el <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/\">dise\u00f1o responsivo<\/a>.<\/p>\n<pre><code class=\"language-css\">img {\n  height: 200px;\n  width: 700px;\n}<\/code><\/pre>\n<h2>Estilo de Imagen Responsivo<\/h2>\n<p>Aplicar valores espec\u00edficos para los atributos <code>width<\/code> y <code>height<\/code> a una imagen puede tener consecuencias no deseadas, como comprimirla o distorsionarla. Esto es especialmente cierto si las dimensiones especificadas no coinciden con la relaci\u00f3n de aspecto original de la imagen.<\/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=\"Imagen comprimida.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagen comprimida.<\/figcaption><\/figure>\n<p>Para evitar estos problemas y mantener las proporciones adecuadas de la imagen, aqu\u00ed es donde entra en juego el estilo de imagen responsivo. El estilo de imagen responsivo garantiza que las im\u00e1genes se adapten a diferentes tama\u00f1os de pantalla, lo que es crucial para el <a href=\"https:\/\/kinsta.com\/es\/blog\/principios-diseno-web\/\">dise\u00f1o web<\/a> responsivo.<\/p>\n<p>Puedes conseguirlo utilizando la propiedad <code>max-width<\/code>, que limita la anchura m\u00e1xima de una imagen.<\/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=\"Imagen responsiva.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagen responsiva.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Hay una diferencia cuando ajustas las propiedades <code>width<\/code> y <code>max-width<\/code> a <code>100%<\/code>. Utilizar <code>width: 100%<\/code> permite que la imagen se estire o se encoja para ajustarse a la anchura del contenedor, mientras que <code>max-width: 100%<\/code> garantiza que la imagen no supere su tama\u00f1o original, pero a\u00fan puede reducirse para ajustarse al contenedor.<\/p>\n<\/aside>\n\n<p>Tambi\u00e9n puedes utilizar <a href=\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/\">media queries<\/a> para modificar el estilo de la imagen en funci\u00f3n de los diferentes puntos de corte del dispositivo. Las media queries te permiten aplicar reglas CSS espec\u00edficas en funci\u00f3n del tama\u00f1o de la pantalla del dispositivo, su orientaci\u00f3n y otras caracter\u00edsticas. Por ejemplo:<\/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>Utilizar Object-Fit para Mantener la Relaci\u00f3n de Aspecto y Evitar el Encogimiento<\/h2>\n<p>A veces, hay situaciones en las que necesitas especificar una anchura y altura concretas para una imagen. En tales casos, puedes utilizar la propiedad CSS <code>object-fit<\/code> para controlar c\u00f3mo se comporta la imagen dentro de sus dimensiones especificadas.<\/p>\n<p>La propiedad <code>object-fit<\/code> te permite especificar c\u00f3mo debe encajar una imagen dentro de su contenedor manteniendo su relaci\u00f3n de aspecto. Puede tomar varios valores, como<\/p>\n<ul>\n<li><strong>fill:<\/strong> Este valor estira o aplasta la imagen para que encaje exactamente en su contenedor, pudiendo provocar distorsiones.<\/li>\n<li><strong>contain:<\/strong> Este valor escala la imagen proporcionalmente para que quepa dentro del contenedor sin recortarla, manteniendo la relaci\u00f3n de aspecto. Garantiza que toda la imagen sea visible dentro del contenedor, pudiendo provocar espacios vac\u00edos.<\/li>\n<li><strong>cover:<\/strong> Este valor escala la imagen proporcionalmente para cubrir el contenedor manteniendo la relaci\u00f3n de aspecto. Puede dar lugar a que se recorten los bordes de la imagen para garantizar que llene todo el contenedor.<\/li>\n<li><strong>none:<\/strong> Este valor no aplica ninguna escala ni recorte, y la imagen conservar\u00e1 su tama\u00f1o original, desbordando potencialmente el contenedor.<\/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=\"Resultado para estilos populares de ajuste de objetos.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Resultado para estilos populares de ajuste de objetos.<\/figcaption><\/figure>\n<p>Aqu\u00ed tienes un ejemplo de uso de la propiedad de ajuste a objeto:<\/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=kO4LZSqJOq\" data-secret=\"kO4LZSqJOq\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Crear Im\u00e1genes con Esquinas Redondeadas con CSS<\/h2>\n<p>A\u00f1adir esquinas redondeadas a las im\u00e1genes puede darles un aspecto m\u00e1s suave y visualmente atractivo.<\/p>\n<p>Con CSS, puedes conseguir f\u00e1cilmente este efecto aplicando la propiedad <code>border-radius<\/code> a la imagen.<\/p>\n<p>A continuaci\u00f3n te explicamos c\u00f3mo puedes crear im\u00e1genes con esquinas redondeadas:<\/p>\n<pre><code class=\"language-css\">img {\n  border-radius: 10px;\n}<\/code><\/pre>\n<p>En el ejemplo anterior, establecemos la propiedad <code>border-radius<\/code> en <code>10px<\/code>. Ajusta el valor a tu preferencia para controlar la redondez de las esquinas. Este valor puede utilizar las unidades que prefieras, como rem, porcentaje, etc.<\/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=\"Imagen con esquinas redondeadas.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagen con esquinas redondeadas.<\/figcaption><\/figure>\n<h2>Crear Im\u00e1genes Circulares con CSS<\/h2>\n<p>Para que tus im\u00e1genes sean perfectamente circulares, combina la propiedad <code>border-radius<\/code> con dimensiones iguales de anchura y altura.<\/p>\n<p>Aqu\u00ed te explicamos c\u00f3mo crear im\u00e1genes circulares:<\/p>\n<pre><code class=\"language-css\">img {\n  border-radius: 50%;\n  width: 200px;\n  height: 200px;\n}<\/code><\/pre>\n<p>En el ejemplo anterior, la propiedad <code>border-radius<\/code> se establece en <code>50%<\/code>, lo que crea un c\u00edrculo haciendo que la curva del borde sea la mitad de la anchura o altura de la imagen.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Los atributos <code>width<\/code> y <code>height<\/code> deben tener las mismas dimensiones para conseguir una imagen perfectamente circular.<\/p>\n<\/aside>\n\n<p>Tambi\u00e9n puedes utilizar la propiedad <code>clip-path<\/code>. Te permite definir una trayectoria de recorte para un elemento, creando formas \u00fanicas.<\/p>\n<p>Aqu\u00ed tienes un ejemplo de una imagen recortada en un c\u00edrculo:<\/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=gJNJ40xbLu\" data-secret=\"gJNJ40xbLu\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Centrar Im\u00e1genes con CSS<\/h2>\n<p>Alinear las im\u00e1genes en el centro de su contenedor es una pr\u00e1ctica habitual en el <a href=\"https:\/\/kinsta.com\/es\/secciones\/diseno-web\/\">dise\u00f1o web<\/a>. Hay muchas formas de conseguirlo; una es establecer la propiedad <code>display<\/code> de la imagen en <code>block<\/code> y aplicar <code>margin: 0 auto<\/code>, que centra horizontalmente la imagen dentro de su contenedor.<\/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=\"Imagen centrada.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagen centrada.<\/figcaption><\/figure>\n<h2>Crear Im\u00e1genes Transparentes<\/h2>\n<p>Puedes utilizar CSS para aplicar el efecto de transparencia deseado para hacer transparente una imagen. La propiedad <code>opacity<\/code> te permite controlar el nivel de transparencia de un elemento, incluidas las im\u00e1genes.<\/p>\n<p>Un valor de <code>1<\/code> representa la opacidad total (completamente visible), mientras que <code>0<\/code> representa la transparencia total (completamente invisible).<\/p>\n<pre><code class=\"language-css\">img {\n  opacity: 0.5;\n}<\/code><\/pre>\n<p>La opacidad de la imagen en el c\u00f3digo anterior est\u00e1 ajustada a <code>0.5<\/code>, lo que produce un efecto semitransparente. Puedes ajustar el valor de la opacidad para conseguir el nivel de transparencia deseado.<\/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=\"Imagen transparente.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagen transparente.<\/figcaption><\/figure>\n<h2>Colocar Texto en las im\u00e1genes<\/h2>\n<p>Colocar texto sobre las im\u00e1genes puede crear dise\u00f1os visualmente atractivos e informativos. Para colocar texto sobre una imagen, puedes utilizar una combinaci\u00f3n de posicionamiento CSS y <code>z-index<\/code>.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/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>En el c\u00f3digo anterior, el <code>image-container<\/code> <code>div<\/code> sirve de contenedor tanto para la imagen como para el texto superpuesto. La propiedad <code>position: relative<\/code> se aplica al contenedor para establecer un contexto de posicionamiento. A continuaci\u00f3n, se utiliza la clase <code>image-text<\/code> para posicionar el texto de forma absoluta dentro del contenedor utilizando <code>position: absolute<\/code>, y las propiedades <code>top<\/code>, <code>left<\/code> y <code>transform<\/code> para centrarlo. La propiedad <code>z-index<\/code> garantiza que el texto aparezca por encima de la imagen, y puedes personalizar a\u00fan m\u00e1s el aspecto del texto con el color, el tama\u00f1o y el peso de la fuente.<\/p>\n<p>Ten en cuenta que los valores espec\u00edficos de posicionamiento y estilo pueden ajustarse para adaptarse a tus preferencias y requisitos de dise\u00f1o.<\/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=CX9RAnSOVR\" data-secret=\"CX9RAnSOVR\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Voltear Im\u00e1genes: Crear Efectos Reflejados<\/h2>\n<p>Voltear im\u00e1genes puede a\u00f1adir un elemento visual interesante a tu <a href=\"https:\/\/kinsta.com\/es\/blog\/cursos-diseno-web\/\">dise\u00f1o web<\/a>. Tanto si quieres crear un efecto de espejo como voltear una imagen vertical u horizontalmente, CSS proporciona t\u00e9cnicas sencillas para conseguir este efecto.<\/p>\n<h3>Volteo Horizontal<\/h3>\n<p>Para voltear horizontalmente una imagen, puedes utilizar la propiedad transformar con la funci\u00f3n <code>scaleX()<\/code>. El valor <code>scaleX(-1)<\/code> voltea la imagen a lo largo del eje horizontal.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleX(-1);\n}<\/code><\/pre>\n<h3>Volteo Vertical<\/h3>\n<p>Para voltear verticalmente una imagen, puedes utilizar la propiedad transformar con la funci\u00f3n <code>scaleY()<\/code>. El valor <code>scaleY(-1)<\/code> voltea la imagen a lo largo del eje vertical.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleY(-1);\n}<\/code><\/pre>\n<h3>Volteo Diagonal<\/h3>\n<p>Para crear un efecto de volteo diagonal, combina las funciones <code>scaleX()<\/code> y <code>scaleY()<\/code> dentro de la propiedad <code>transform<\/code>.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleX(-1) scaleY(-1);\n}<\/code><\/pre>\n<p>En el c\u00f3digo anterior, la imagen se reflejar\u00e1 horizontal y verticalmente, dando lugar a un efecto de volteo diagonal.<\/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=\"Volteo horizontal, vertical y diagonal de la imagen.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Volteo horizontal, vertical y diagonal de la imagen.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voltear im\u00e1genes utilizando CSS no modifica el archivo de imagen real; s\u00f3lo cambia la forma en que se muestra en la p\u00e1gina web. Si necesitas voltear la imagen permanentemente, debes editarla utilizando una herramienta de edici\u00f3n.<\/p>\n<\/aside>\n\n<h2>A\u00f1adir Filtros a las Im\u00e1genes: Mejorar los Efectos Visuales<\/h2>\n<p>Los filtros pueden transformar el aspecto de las im\u00e1genes, permiti\u00e9ndote crear efectos visuales \u00fanicos. CSS proporciona una serie de propiedades de filtro que pueden aplicarse a las im\u00e1genes, permiti\u00e9ndote ajustar el brillo, el contraste, la saturaci\u00f3n, etc.<\/p>\n<p>Puedes utilizar la propiedad <code>filter<\/code> para aplicar un filtro a una imagen. Esta propiedad acepta varias funciones de filtro, cada una de las cuales altera diferentes aspectos de la imagen.<\/p>\n<pre><code class=\"language-css\">img {\n  filter: brightness(150%);\n}<\/code><\/pre>\n<p>En el c\u00f3digo anterior, se aplica a la imagen la funci\u00f3n <code>brightness(150%)<\/code>. Esto aumenta el brillo de la imagen en <strong>un 150%<\/strong>.<\/p>\n<h3>Funciones de Filtro de Uso Com\u00fan<\/h3>\n<p>Aqu\u00ed tienes algunas funciones de filtro de uso com\u00fan:<\/p>\n<ul>\n<li><code>brightness()<\/code>: Ajusta el brillo de la imagen.<\/li>\n<li><code>contrast()<\/code>: Modifica el contraste de la imagen.<\/li>\n<li><code>saturate()<\/code>: Modifica el nivel de saturaci\u00f3n de la imagen.<\/li>\n<li><code>grayscale()<\/code>: Convierte la imagen a escala de grises.<\/li>\n<li><code>blur()<\/code>: Aplica un efecto de desenfoque a la imagen.<\/li>\n<li><code>sepia()<\/code>: Aplica un efecto de tono sepia a la imagen.<\/li>\n<\/ul>\n<p>Puedes experimentar con diferentes funciones y valores de filtro para conseguir los efectos visuales deseados. Combinar varios filtros tambi\u00e9n puede producir transformaciones m\u00e1s intrincadas.<\/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=LWjI6BAkwX\" data-secret=\"LWjI6BAkwX\" 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>No todos los filtros son compatibles con todos los navegadores. Antes de utilizar un filtro concreto, comprueba su compatibilidad en distintos navegadores utilizando plataformas como <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">caniuse.com<\/a>.<\/p>\n<\/aside>\n\n<h2>Crear Superposiciones al Pasar el Rat\u00f3n sobre las Im\u00e1genes<\/h2>\n<p>Las sobreimpresiones en im\u00e1genes pueden aportar interactividad e inter\u00e9s visual a tu sitio web. Cuando un usuario pasa el rat\u00f3n por encima de una imagen, se puede aplicar un efecto de superposici\u00f3n, como una superposici\u00f3n de color o una leyenda de texto.<\/p>\n<p>CSS proporciona varias t\u00e9cnicas para conseguir superposiciones de hover(pasar el rat\u00f3n); una forma es utilizar transiciones CSS. Mediante la transici\u00f3n de propiedades espec\u00edficas de un elemento, puedes animar suavemente los cambios al pasar el rat\u00f3n por encima de una imagen.<\/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>En el c\u00f3digo anterior, un elemento <code>.image-container<\/code> envuelve la imagen y un elemento <code>.overlay<\/code>. La superposici\u00f3n es inicialmente transparente (<code>opacity: 0<\/code>) y cubre toda la imagen. Al pasar el rat\u00f3n por encima de <code>.image-container<\/code>, la opacidad de <code>.overlay<\/code> pasa a <code>1<\/code>, revelando la superposici\u00f3n de colores.<\/p>\n<p>Para conseguir el efecto visual deseado, puedes personalizar la superposici\u00f3n ajustando las propiedades <code>background-color<\/code> y opacidad.<\/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=nBuOCDSlWj\" data-secret=\"nBuOCDSlWj\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Resumen<\/h2>\n<p>Estilizar im\u00e1genes con CSS abre un mundo de posibilidades creativas, permiti\u00e9ndote mejorar el atractivo visual y la interactividad de tus p\u00e1ginas web.<\/p>\n<p>Cuando estilices im\u00e1genes con CSS, ten siempre en cuenta la accesibilidad, la capacidad de respuesta y el <a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\">rendimiento<\/a>.<\/p>\n<p><em>\u00bfCu\u00e1l es el estilo de imagen CSS que m\u00e1s utilizas? \u00bfCu\u00e1l es el que m\u00e1s te interesa? H\u00e1znoslo saber en los comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando se trata de dise\u00f1o web, los elementos visuales cautivadores pueden marcar la diferencia. Las im\u00e1genes desempe\u00f1an un papel crucial en la creaci\u00f3n de una experiencia &#8230;<\/p>\n","protected":false},"author":287,"featured_media":67260,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1336],"class_list":["post-67259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-lenguajes-desarrollo-web"],"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>Estilo de Imagen CSS: Mejora el Atractivo Visual de tu Web<\/title>\n<meta name=\"description\" content=\"Aumenta el aspecto visual, crea efectos sorprendentes e impresiona a tus visitantes con nuestra gran y completa gu\u00eda de estilos de imagen CSS.\" \/>\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\/es\/blog\/estilo-de-imagen-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Estilo de Imagen CSS: Mejorar el Atractivo Visual con Estilo\" \/>\n<meta property=\"og:description\" content=\"Aumenta el aspecto visual, crea efectos sorprendentes e impresiona a tus visitantes con nuestra gran y completa gu\u00eda de estilos de imagen CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-26T17:00:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:49:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Aumenta el aspecto visual, crea efectos sorprendentes e impresiona a tus visitantes con nuestra gran y completa gu\u00eda de estilos de imagen CSS.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Estilo de Imagen CSS: Mejorar el Atractivo Visual con Estilo\",\"datePublished\":\"2023-06-26T17:00:20+00:00\",\"dateModified\":\"2025-01-17T12:49:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/\"},\"wordCount\":1935,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/\",\"name\":\"Estilo de Imagen CSS: Mejora el Atractivo Visual de tu Web\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg\",\"datePublished\":\"2023-06-26T17:00:20+00:00\",\"dateModified\":\"2025-01-17T12:49:15+00:00\",\"description\":\"Aumenta el aspecto visual, crea efectos sorprendentes e impresiona a tus visitantes con nuestra gran y completa gu\u00eda de estilos de imagen CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lenguajes de Desarrollo Web\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/lenguajes-desarrollo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Estilo de Imagen CSS: Mejorar el Atractivo Visual con Estilo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Estilo de Imagen CSS: Mejora el Atractivo Visual de tu Web","description":"Aumenta el aspecto visual, crea efectos sorprendentes e impresiona a tus visitantes con nuestra gran y completa gu\u00eda de estilos de imagen CSS.","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\/es\/blog\/estilo-de-imagen-css\/","og_locale":"es_ES","og_type":"article","og_title":"Estilo de Imagen CSS: Mejorar el Atractivo Visual con Estilo","og_description":"Aumenta el aspecto visual, crea efectos sorprendentes e impresiona a tus visitantes con nuestra gran y completa gu\u00eda de estilos de imagen CSS.","og_url":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-06-26T17:00:20+00:00","article_modified_time":"2025-01-17T12:49:15+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aumenta el aspecto visual, crea efectos sorprendentes e impresiona a tus visitantes con nuestra gran y completa gu\u00eda de estilos de imagen CSS.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Estilo de Imagen CSS: Mejorar el Atractivo Visual con Estilo","datePublished":"2023-06-26T17:00:20+00:00","dateModified":"2025-01-17T12:49:15+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/"},"wordCount":1935,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/","url":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/","name":"Estilo de Imagen CSS: Mejora el Atractivo Visual de tu Web","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg","datePublished":"2023-06-26T17:00:20+00:00","dateModified":"2025-01-17T12:49:15+00:00","description":"Aumenta el aspecto visual, crea efectos sorprendentes e impresiona a tus visitantes con nuestra gran y completa gu\u00eda de estilos de imagen CSS.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-image-styling.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/estilo-de-imagen-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lenguajes de Desarrollo Web","item":"https:\/\/kinsta.com\/es\/secciones\/lenguajes-desarrollo-web\/"},{"@type":"ListItem","position":3,"name":"Estilo de Imagen CSS: Mejorar el Atractivo Visual con Estilo"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/67259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=67259"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/67259\/revisions"}],"predecessor-version":[{"id":67562,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/67259\/revisions\/67562"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67259\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/67260"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=67259"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=67259"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=67259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}