{"id":96,"date":"2014-06-08T09:56:56","date_gmt":"2014-06-08T09:56:56","guid":{"rendered":"http:\/\/html5box.com\/blog\/?p=96"},"modified":"2014-06-08T09:58:43","modified_gmt":"2014-06-08T09:58:43","slug":"caption-outside-of-the-html5-gallery","status":"publish","type":"post","link":"https:\/\/html5box.com\/blog\/jquery-photo-gallery\/caption-outside-of-the-html5-gallery\/","title":{"rendered":"Caption outside of the HTML5 Gallery"},"content":{"rendered":"<p><strong>Question<\/strong>:<\/p>\n<p>I'm wanting to have the titles outside the videos\/images - not over the top as they are by default. I was just trying to do this by CSS with a margin-top:-60px; but this makes the title disappear as it's then outside the .html5gallery div.<\/p>\n<p>I've tried every combination of adding padding to the top of the gallery to make room for my negative margin, but no dice. Any ideas?<\/p>\n<p>I don't have an example uploaded anywhere at the moment, just doing it on my localhost. Let me know if you need a demo and I will make one with all the extraneous stuff removed.<\/p>\n<p><strong>Answer<\/strong>:<\/p>\n<p>You can view this tutorial: \u00a0<a href=\"http:\/\/html5box.com\/html5gallery\/cssstyle.php\" target=\"_blank\">http:\/\/html5box.com\/html5gallery\/cssstyle.php<\/a><\/p>\n<p>The tutorial is placing the title to the bottom, you can change the top value to -60px !important to make it go to top. <\/p>\n<p>And I think the problem is because the text colour is white, it becomes invisible if your webpage background is also white. So you probably also need to change the text colour.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\n  .html5gallery-title-0 {\r\n    top: -60px !important;\r\n  }\r\n  .html5gallery-title-text-0 {\r\n    color: #333 !important;\r\n    background-color: transparent !important;\r\n    text-align: center !important;\r\n    font-size: 18px !important;\r\n  }\r\n&lt;\/style&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Question: I'm wanting to have the titles outside the videos\/images - not over the top as they are by default. I was just trying to do this by CSS with a margin-top:-60px; but this makes the title disappear as it's then outside the .html5gallery div. I've tried every combination of adding padding to the top &hellip; <a href=\"https:\/\/html5box.com\/blog\/jquery-photo-gallery\/caption-outside-of-the-html5-gallery\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Caption outside of the HTML5 Gallery<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6],"tags":[],"class_list":["post-96","post","type-post","status-publish","format-standard","hentry","category-jquery-photo-gallery","category-jquery-video-gallery"],"_links":{"self":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":5,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/96\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}