{"id":6591,"date":"2014-03-03T10:00:01","date_gmt":"2014-03-03T09:00:01","guid":{"rendered":"http:\/\/www.host-fusion.com\/blog\/?p=6591"},"modified":"2014-10-15T20:41:27","modified_gmt":"2014-10-15T18:41:27","slug":"como-aplicar-efectos-fade-en-imagenes-en-wordpress","status":"publish","type":"post","link":"https:\/\/www.host-fusion.com\/blog\/2014\/03\/03\/como-aplicar-efectos-fade-en-imagenes-en-wordpress\/","title":{"rendered":"Como aplicar efectos Fade en im\u00e1genes en WordPress"},"content":{"rendered":"

\"host-fusion\"<\/p>\n

Cuando vi este tutorial en WPBeginner<\/strong><\/a>\u00a0(How to Fade Images on Mouseover in WordPress) me pareci\u00f3 interesante escribir un post en el blog, es una forma estupenda y muy sencilla de a\u00f1adir un elegante efecto Fade a las im\u00e1genes de nuestros post, no es que haga nada en especial pero llama la atenci\u00f3n visual de quien pasa el puntero de su rat\u00f3n sobre cualquiera de las im\u00e1genes del post.<\/p>\n

Como ya has podido comprobar la imagen de este post se ve ligeramente \u00abapagada\u00bb y al pasar el rat\u00f3n por encima se \u00abenciende\u00bb ganando vida y color la imagen, si le a\u00f1adimos un link gana aun mas interactividad e invita al visitante a hacer clic.<\/p>\n

Para aplicar este sencillo y efectivo efecto te recomiendo que utilices un child theme\u00a0<\/strong>para que cuando actualices tu theme no se pierdan los cambios realizados y tengas que volver a crearlos.<\/p>\n

En cualquiera de los casos para aplicar este efecto tenemos que abrir nuestra hoja de estilos de nuestro Theme, style.css<\/strong>, puedes editarla desde tu programa favorito o directamente en la secci\u00f3n de apariencia, Editor, de nuestro WordPress.<\/p>\n

Una vez abierta a\u00f1adimos estas simples lineas:<\/p>\n

\"css<\/p>\n

Y si queremos hacerlo un poco mas complicado podemos a\u00f1adir las siguientes lineas para que el efecto fade tenga una transici\u00f3n, en este ejemplo 2 segundos de transici\u00f3n:<\/p>\n

\"css<\/p>\n

O rizar el rizo haciendo que el efecto sea al rev\u00e9s y modificar la opacidad de las im\u00e1genes a\u00f1adimos las siguientes lineas:<\/p>\n

\"Css<\/p>\n

Lo mejor de todo ? Que podemos jugar con los par\u00e1metros hasta encontrar el efecto que mas nos guste.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Cuando vi este tutorial en WPBeginner\u00a0(How to Fade Images on Mouseover in WordPress) me pareci\u00f3 interesante escribir un post en el blog, es una forma estupenda y muy sencilla de a\u00f1adir un elegante efecto Fade a las im\u00e1genes de nuestros post, no es que haga nada en especial pero llama la atenci\u00f3n visual de quien […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,376],"tags":[924,925,837],"class_list":["post-6591","post","type-post","status-publish","format-standard","hentry","category-novedades-h-f","category-wordpress","tag-css-wordpress","tag-efecto-fade-imagenes","tag-tutoriales-wordpress"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\n\t\t