{"id":20965,"date":"2023-03-18T03:56:07","date_gmt":"2023-03-18T02:56:07","guid":{"rendered":"https:\/\/fran.cosmobuzz.es\/?p=20965"},"modified":"2023-03-21T06:14:31","modified_gmt":"2023-03-21T05:14:31","slug":"efectos-css-para-imagenes-en-wordpress","status":"publish","type":"post","link":"https:\/\/fran.cosmobuzz.es\/en\/efectos-css-para-imagenes-en-wordpress\/","title":{"rendered":"Efectos CSS para im\u00e1genes en WordPress"},"content":{"rendered":"<p>Vamos a utilizar la propiedad \u00abtransform\u00bb, \u00abscale\u00bb y \u00abtransition\u00bb entre otras de CSS para conseguir unos cuantos efectos en las im\u00e1genes de nuestra web. Rotaremos la imagen en 10 grados a la derecha, aumentaremos o disminuiremos el brillo, aplicaremos un efecto blanco y negro cuando el rat\u00f3n se posa sobre la imagen y tambi\u00e9n proporcionaremos un efecto zoom para que al sobrevolar la imagen se agrande ligeramente.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>En el primer ejemplo vamos a iluminar la imagen al pasar el rat\u00f3n:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code has-base-2-color has-contrast-2-background-color has-text-color has-background\"><code>\/* iluminar imagen *\/\n.imagen-brillo  {\n-webkit-filter: brightness(80%);\nfilter: brightness(80%);\n}\n.imagen-brillo:hover  {\n-webkit-filter: brightness(95%);\nfilter: brightness(95%);\n}\n.imagen-brillo {\ntransition: all 0.3s ease;\n}<\/code><\/pre>\n\n\n<div class=\"gb-container gb-container-427febb4\"><div class=\"gb-inside-container\">\n\n<iframe src=\"https:\/\/drive.google.com\/file\/d\/1raRKM2ItebUCYW0dvRQoSCn66OsRQDt9\/preview\" width=\"500\" height=\"auto\"><\/iframe>\n\n<\/div><\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>En este caso le damos un efecto blanco y negro que al posar el mouse vuelve a su estado normal:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code has-base-2-color has-contrast-2-background-color has-text-color has-background\"><code>\/* imagen efecto gris *\/\n.imagen-gris {filter: grayscale(80%);\n}\n.imagen-gris:hover {filter: grayscale(1%);\n}\n.imagen-gris {transition: all 0.4s;}<\/code><\/pre>\n\n\n<div class=\"gb-container gb-container-05e5a505\"><div class=\"gb-inside-container\">\n\n<iframe src=\"https:\/\/drive.google.com\/file\/d\/1_JoMyDL4-YFEAp2lwgtjZSTwE8DWsiTl\/preview\" width=\"500\" height=\"auto\"><\/iframe>\n\n<\/div><\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ahora vamos a oscurecer la imagen al sobrevolar con el puntero:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code has-base-2-color has-contrast-2-background-color has-text-color has-background\"><code>\/* imagen brillo oscurecer *\/\n.mi-imagen:hover img  {\n-webkit-filter: brightness(50%);\nfilter: brightness(50%);\n}\n\n\/* Ajustamos la transicion *\/\n.mi-imagen img {\ntransition: all 0.3s ease;\n}<\/code><\/pre>\n\n\n<div class=\"gb-container gb-container-f6eeb6e6\"><div class=\"gb-inside-container\">\n\n<iframe src=\"https:\/\/drive.google.com\/file\/d\/1GZ5FoxAS6L5vsJuINo0P3jxBktiLMFP1\/preview\" width=\"500\" height=\"auto\"><\/iframe>\n\n<\/div><\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Rotando unos 10 grados la imagen y le ponemos una leve opacidad:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code has-base-2-color has-contrast-2-background-color has-text-color has-background\"><code>\/* Propiedades de la imagen *\/\n.imagen {\n  width: 100%; \n  height: auto;\n  transition: transform 0.3s ease, opacity 0.3s ease; \n}\n\n\/* Definimos la transformaci\u00f3n al pasar el rat\u00f3n por encima *\/\n.imagen:hover {\n  transform: rotate(10deg);\n  opacity: 0.3; \n}<\/code><\/pre>\n\n\n\n<p>La propiedad \u00abtransition\u00bb se utiliza para hacer que el efecto de rotaci\u00f3n y opacidad sea suave y gradual.<\/p>\n\n\n<div class=\"gb-container gb-container-f02214aa\"><div class=\"gb-inside-container\">\n\n<iframe src=\"https:\/\/drive.google.com\/file\/d\/1Dpk3EOq9tCPshNxw4S-t_oA7OzoX12rs\/preview\" width=\"500\" height=\"auto\"><\/iframe>\n\n<\/div><\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Efecto Zoom al posar el rat\u00f3n en un contenedor:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code has-base-2-color has-contrast-2-background-color has-text-color has-background\"><code>.imagen {\n  position: relative;\n  overflow: hidden;\n  width: 50%;\n  height: auto;\n}\n\n.imagen img {\n  display: block;\n  width: 100%;\n  height: auto;\n  transition: transform 0.3s ease;\n}\n\n.imagen:hover img {\n  transform: scale(1.2);\n}<\/code><\/pre>\n\n\n\n<p>La propiedad \u00abtransform\u00bb de CSS nos ayuda a escalar la imagen al 120% de su tama\u00f1o original cuando el rat\u00f3n se posa sobre la imagen.<\/p>\n\n\n<div class=\"gb-container gb-container-5e35d769\"><div class=\"gb-inside-container\">\n\n<iframe src=\"https:\/\/drive.google.com\/file\/d\/1NpOS5V6FOTS2O2yVlOdsmFl79DiPjNSK\/preview\" width=\"500\" height=\"auto\"><\/iframe>\n\n<\/div><\/div>\n\n\n<p>Recuerda insertar cada clase CSS en los ajustes de cada imagen. Puedes insertar varias id en un mismo bloque si deseas combinar efectos.<\/p>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":20975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[196],"tags":[121,222],"_links":{"self":[{"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/posts\/20965"}],"collection":[{"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/comments?post=20965"}],"version-history":[{"count":0,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/posts\/20965\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/media\/20975"}],"wp:attachment":[{"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/media?parent=20965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/categories?post=20965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/tags?post=20965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}