{"id":5071,"date":"2012-10-25T13:43:20","date_gmt":"2012-10-25T13:43:20","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5071"},"modified":"2019-03-05T17:28:00","modified_gmt":"2019-03-05T17:28:00","slug":"content-hover-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/","title":{"rendered":"Content Hover Me con jQuery"},"content":{"rendered":"<p>En este art\u00edculo vamos a ver una forma sencilla de conseguir el efecto que tras pasar el rat\u00f3n por encima de una imagen aparezca desde abajo informaci\u00f3n relacionada utilizando jQuery Animation.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5072\" title=\"content-hover-me\" alt=\"\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png\" width=\"471\" height=\"275\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png 471w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me-300x175.png 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/a><\/p>\n<p>Tal como muestra la imagen la idea es que aparezcan im\u00e1genes de productos o servicios y que al pasar el rat\u00f3n por encima se desplegue para arriba ese panel azul con opacidad que vemos en la imagen de la izquierda con contenido informativo dentro.<\/p>\n<p>Por ejemplo, se me viene a la cabeza a\u00f1adir este efecto en una tienda virtual en los productos destacados de la p\u00e1gina inicial donde podr\u00edamos mostrar tan solo la imagen del producto y al pasar el rat\u00f3n por encima aparezca su t\u00edtulo, precio y un bot\u00f3n de a\u00f1adir a la cesta.<\/p>\n<p>Para a\u00f1adir este efecto necesitaremos a\u00f1adir en el &lt;head&gt; de nuestra p\u00e1gina algunos estilos:<\/p>\n<pre>.element {\r\n\u00a0\u00a0 \u00a0background: none repeat scroll 0 0 #FFFFFF;\r\n\u00a0\u00a0\u00a0 border: 1px solid #E5E5E5;\r\n\u00a0\u00a0\u00a0 height: 222px;\r\n\u00a0\u00a0\u00a0 padding: 2px;\r\n\u00a0\u00a0\u00a0 width: 220px;\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0margin-left:10px;\r\n}\r\n\r\na.image {\r\n\u00a0\u00a0 \u00a0display: block;\r\n\u00a0\u00a0\u00a0 overflow: hidden;\r\n}\r\n\r\n.contenthover {\r\n\u00a0\u00a0 \u00a0width:220px;\r\n\u00a0\u00a0 \u00a0height:182px;\r\n\u00a0\u00a0 \u00a0background-color: #0099CC;\r\n\u00a0\u00a0 \u00a0opacity:0.7;\r\n\u00a0\u00a0 \u00a0position:absolute;\r\n\u00a0\u00a0 \u00a0top:222px;\r\n\u00a0\u00a0 \u00a0left:0px;\r\n\u00a0\u00a0 \u00a0color:#FFFFFF;\r\n\u00a0\u00a0 \u00a0font-size:22px;\r\n\u00a0\u00a0 \u00a0text-align:center;\r\n\u00a0\u00a0 \u00a0padding-top:40px;\r\n}<\/pre>\n<p>Donde el secreto est\u00e1 en la clase \u00abcontenhover\u00bb donde est\u00e1n los atributos del contenido escondido que se desliza hacia arriba al hacer hover en la imagen. A la hora de implementarlo deber\u00e1s tener especial atenci\u00f3n a los anchos y altos de tus im\u00e1genes adem\u00e1s del top y left.<\/p>\n<p>Tambi\u00e9n deberemos a\u00f1adir la librer\u00eda jQuery y los scripts necesarios:<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"..\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0$('.image').hover(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).find('.contenthover').stop().animate({top:'0px'}, 500);\r\n\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0 \u00a0function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).find('.contenthover').stop().animate({top:'222px'}, 500);\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Como vemos el documento espera a que el usuario pase el rat\u00f3n por encima de alguna imagen. Al pasar por encima de una de las im\u00e1genes buscamos el elemento con class=\u00bbcontenthover\u00bb y lo animamos para que suba al top.<\/p>\n<p>Y ahora solo falta ver el c\u00f3digo HTML:<\/p>\n<pre>&lt;div class=\"element\"&gt;\r\n\u00a0\u00a0 \u00a0&lt;a class=\"image\" href=\"#\" style=\"position:relative\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"contenthover\"&gt;Texto de muestra 1&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;img src=\"images\/image1.jpg\" width=\"220\" height=\"222\"&gt;\r\n\u00a0\u00a0\u00a0 &lt;\/a&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Este efecto lo podr\u00e1s ver mejor en un <a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/content-hover-me\/\" target=\"_blank\" rel=\"noopener noreferrer\">ejemplo en funcionamiento<\/a>.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/content-hover-effects\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ver otro ejemplo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a ver una forma sencilla de conseguir el efecto que tras pasar el rat\u00f3n por encima de una imagen aparezca desde abajo informaci\u00f3n relacionada utilizando jQuery Animation. Tal como muestra la imagen la idea es que aparezcan im\u00e1genes de productos o servicios y que al pasar el rat\u00f3n por encima se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5072,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[74,167,110],"class_list":["post-5071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-contenedores","tag-eventos","tag-imagenes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Content Hover Me con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Content Hover Me con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a ver una forma sencilla de conseguir el efecto que tras pasar el rat\u00f3n por encima de una imagen aparezca desde abajo informaci\u00f3n relacionada utilizando jQuery Animation. Tal como muestra la imagen la idea es que aparezcan im\u00e1genes de productos o servicios y que al pasar el rat\u00f3n por encima se [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-10-25T13:43:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-05T17:28:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png\" \/>\n\t<meta property=\"og:image:width\" content=\"471\" \/>\n\t<meta property=\"og:image:height\" content=\"275\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/\",\"name\":\"Content Hover Me con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png\",\"datePublished\":\"2012-10-25T13:43:20+00:00\",\"dateModified\":\"2019-03-05T17:28:00+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png\",\"width\":471,\"height\":275},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Content Hover Me con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Content Hover Me con jQuery - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Content Hover Me con jQuery - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a ver una forma sencilla de conseguir el efecto que tras pasar el rat\u00f3n por encima de una imagen aparezca desde abajo informaci\u00f3n relacionada utilizando jQuery Animation. Tal como muestra la imagen la idea es que aparezcan im\u00e1genes de productos o servicios y que al pasar el rat\u00f3n por encima se [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-10-25T13:43:20+00:00","article_modified_time":"2019-03-05T17:28:00+00:00","og_image":[{"width":471,"height":275,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/","name":"Content Hover Me con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png","datePublished":"2012-10-25T13:43:20+00:00","dateModified":"2019-03-05T17:28:00+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/content-hover-me.png","width":471,"height":275},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/content-hover-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Content Hover Me con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=5071"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5071\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5072"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}