{"id":1642,"date":"2010-11-21T17:56:42","date_gmt":"2010-11-21T19:56:42","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=1642"},"modified":"2011-03-11T20:52:33","modified_gmt":"2011-03-11T22:52:33","slug":"mostrar-legenda-ao-passar-o-mouse-sobre-imagens","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens","title":{"rendered":"Mostrar legenda ao passar o mouse sobre imagens"},"content":{"rendered":"

\"Legenda
\nVou mostrar um exemplo r\u00e1pido para fazer o efeito de revelar a legenda de uma imagem<\/strong> apenas quando o usu\u00e1rio passar o mouse sobre a imagem. Normalmente se coloca a legenda logo abaixo da imagem, nesse caso a legenda aparecer\u00e1 sobre a imagem e na parte inferior. O efeito \u00e9 inteiramente feito com CSS, sem qualquer necessidade de JavaScript. \u00c9 um \u00f3timo efeito para ser usado em galerias de imagens<\/strong> para colocar a descri\u00e7\u00e3o da imagem quando o mouse estiver sobre a imagem.
\n
\nA t\u00e9cnica do efeito consiste em esconder a legenda at\u00e9 que o usu\u00e1rio passe o mouse sobre a imagem<\/strong>. Repare que usamos a marca\u00e7\u00e3o span class=\"desc\"<\/code> para tal finalidade. Pensando em tornar mais \u00f3bvio que temos uma legenda na imagem vamos adicionar um link “saiba mais”<\/em>. Quando o visitante do site passar o mouse sobre o link a legenda aparecer\u00e1.<\/p>\n

Exemplo<\/h2>\n

Voc\u00ea pode ver o resultado final desse tutorial na P\u00e1gina de Exemplo<\/a>. O site DesignFlavr<\/a> faz uso desse efeito, por\u00e9m um pouco mais complexo.<\/p>\n

HTML<\/h2>\n
\r\n<div class="imgefeito">\r\n<a href="#">\r\n\t<img src="teste.jpg" alt="Daim Graffiti" \/>\r\n\t<span class="mais">Saiba Mais<\/span>\r\n\t<span class="desc">\r\n\t\t<strong>Lorem Ipsum<\/strong>\r\n\t\tIs simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.\r\n\t<\/span>\r\n<\/a>\r\n<\/div>\r\n<\/pre>\n
CSS<\/h2>\n
Abaixo a estiliza\u00e7\u00e3o da DIV que aloca todos os outros elementos.<\/p>\n
\r\n.imgefeito {\r\n\tmargin: 0;\r\n\toverflow: hidden;\r\n\tfloat: left;\r\n\tposition: relative;\r\n}\r\n.imgefeito a {\r\n\ttext-decoration: none;\r\n\tfloat: left;\r\n}\r\n.imgefeito a:hover {\r\n\tcursor: pointer;\r\n} \r\n<\/pre>\n
Estiliza\u00e7\u00e3o da imagem onde aparecer\u00e1 o texto no estado hover, ou seja, quando o mouse estiver sobre a imagem.<\/p>\n
\r\n.imgefeito a img {\r\n\tfloat: left;\r\n\tmargin: 0;\r\n\tborder: none;\r\n\tpadding: 10px;\r\n\tbackground: #fff;\r\n\tborder: 1px solid #ddd;\r\n} \r\n<\/pre>\n
Em seguida estilizamos o texto Saiba Mais<\/em> e a “caixa” da legenda que ser\u00e1 mostrada quando passarmos o mouse sobre o texto. Perceba o uso de um comando propriet\u00e1rio da Microsoft, -ms-filter<\/code> para o efeito funcionar no Internet Explorer 8.<\/p>\n
\r\n.imgefeito a .mais {\r\n\tposition: absolute;\r\n\tright: 20px;\r\n\tbottom: 20px;\r\n\tfont-size: 1.2em;\r\n\tcolor: #fff;\r\n\tbackground: #000;\r\n\tpadding: 5px 10px;\r\n\tfilter:alpha(opacity=65);\r\n\topacity:.65;\r\n\t-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; \/*--IE 8 Transparency--*\/\r\n}\r\n.imgefeito a:hover .desc{\r\n\tdisplay: block;\r\n\tfont-size: 1.2em;\r\n\tpadding: 10px 0;\r\n\tbackground: #111;\r\n\tfilter:alpha(opacity=75);\r\n\topacity:.75;\r\n\t-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; \/*--IE 8 Transparency--*\/\r\n\tcolor: #fff;\r\n\tposition: absolute;\r\n\tbottom: 11px;\r\n\tleft: 11px;\r\n\tpadding: 10px;\r\n\tmargin: 0;\r\n\twidth: 615px;\r\n\tborder-top: 1px solid #999;\r\n}\r\n.imgefeito a:hover .desc strong {\r\n\tdisplay: block;\r\n\tmargin-bottom: 5px;\r\n\tfont-size:1.5em;\r\n}\r\n\r\n<\/pre>\n
Refer\u00eancias:<\/strong>
\nSohtanaka<\/a> e Aranea.Zuavra<\/a>.<\/p>\n
Como falei no artigo, esta t\u00e9cnica \u00e9 muito \u00fatil para sites de galerias de imagens. Pelo fato da legenda aparecer sobre a imagem, conseguimos economizar espa\u00e7o na p\u00e1gina j\u00e1 que n\u00e3o precisamos deixar um espa\u00e7o para a legenda. Fica a\u00ed a dica!<\/p>\n
Quer ficar sabendo das atualiza\u00e7\u00f5es aqui no Blog? Siga-me no Twitter: @kadunew<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Vou mostrar um exemplo r\u00e1pido para fazer o efeito de revelar a legenda de uma imagem apenas quando o usu\u00e1rio passar o mouse sobre a imagem. Normalmente se coloca a legenda logo abaixo da imagem, nesse caso a legenda aparecer\u00e1 sobre a imagem e na parte inferior. O efeito \u00e9 inteiramente feito com CSS, sem […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[45],"class_list":["post-1642","post","type-post","status-publish","format-standard","hentry","category-css","tag-css"],"yoast_head":"\nMostrar legenda ao passar o mouse sobre imagens<\/title>\n<meta name=\"description\" content=\"Tutorial de CSS que mostra como inserir uma legenda quando o usu\u00e1rio passar o mouse sobre uma imagem. A legenda \u00e9 mostrada sobre a pr\u00f3pria imagem.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mostrar legenda ao passar o mouse sobre imagens\" \/>\n<meta property=\"og:description\" content=\"Tutorial de CSS que mostra como inserir uma legenda quando o usu\u00e1rio passar o mouse sobre uma imagem. A legenda \u00e9 mostrada sobre a pr\u00f3pria imagem.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2010-11-21T19:56:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-03-11T22:52:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/11\/legenda-hover-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"538\" \/>\n\t<meta property=\"og:image:height\" content=\"169\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\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.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens\",\"url\":\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens\",\"name\":\"Mostrar legenda ao passar o mouse sobre imagens\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/11\/legenda-hover-css.png\",\"datePublished\":\"2010-11-21T19:56:42+00:00\",\"dateModified\":\"2011-03-11T22:52:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Tutorial de CSS que mostra como inserir uma legenda quando o usu\u00e1rio passar o mouse sobre uma imagem. A legenda \u00e9 mostrada sobre a pr\u00f3pria imagem.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/11\/legenda-hover-css.png\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/11\/legenda-hover-css.png\",\"width\":\"538\",\"height\":\"169\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/css\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mostrar legenda ao passar o mouse sobre imagens\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mostrar legenda ao passar o mouse sobre imagens","description":"Tutorial de CSS que mostra como inserir uma legenda quando o usu\u00e1rio passar o mouse sobre uma imagem. A legenda \u00e9 mostrada sobre a pr\u00f3pria imagem.","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:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens","og_locale":"pt_BR","og_type":"article","og_title":"Mostrar legenda ao passar o mouse sobre imagens","og_description":"Tutorial de CSS que mostra como inserir uma legenda quando o usu\u00e1rio passar o mouse sobre uma imagem. A legenda \u00e9 mostrada sobre a pr\u00f3pria imagem.","og_url":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens","og_site_name":"KADUNEW","article_published_time":"2010-11-21T19:56:42+00:00","article_modified_time":"2011-03-11T22:52:33+00:00","og_image":[{"width":538,"height":169,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/11\/legenda-hover-css.png","type":"image\/png"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens","url":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens","name":"Mostrar legenda ao passar o mouse sobre imagens","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/11\/legenda-hover-css.png","datePublished":"2010-11-21T19:56:42+00:00","dateModified":"2011-03-11T22:52:33+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Tutorial de CSS que mostra como inserir uma legenda quando o usu\u00e1rio passar o mouse sobre uma imagem. A legenda \u00e9 mostrada sobre a pr\u00f3pria imagem.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/11\/legenda-hover-css.png","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/11\/legenda-hover-css.png","width":"538","height":"169"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/css\/mostrar-legenda-ao-passar-o-mouse-sobre-imagens#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.kadunew.com\/blog\/category\/css"},{"@type":"ListItem","position":3,"name":"Mostrar legenda ao passar o mouse sobre imagens"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1642"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=1642"}],"version-history":[{"count":17,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1642\/revisions"}],"predecessor-version":[{"id":2117,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1642\/revisions\/2117"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=1642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=1642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=1642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}