{"id":15247,"date":"2019-10-23T18:43:49","date_gmt":"2019-10-23T10:43:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15247"},"modified":"2025-04-24T17:13:44","modified_gmt":"2025-04-24T09:13:44","slug":"css3-image-captions","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/","title":{"rendered":"6 Cool Image Captions with CSS3"},"content":{"rendered":"<p>CSS3 is <a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\">really powerful<\/a>. It used to be that we needed images or many lines of JavaScript code to create a simple transition effect. Nowadays, we can achieve the same result using only CSS3.<\/p>\n<p>In this tutorial, we will show you how to create image captions with various transitions simply using CSS3.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css3-image-captions\/\">Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css3-image-captions\/\">Download source<\/a>\n<\/div>\n<h2>Browser Support<\/h2>\n<p>These captions heavily depend on `transform` and `transition` properties, which are relatively new features. Therefore, it\u2019s wise to note the browser support required to run the captions smoothly.<\/p>\n<p>The following browsers already support `transform` and `transition`:<\/p>\n<ul>\n<li>Internet Explorer 10+<\/li>\n<li>Firefox 6+<\/li>\n<li>Chrome 13+<\/li>\n<li>Safari 3.2+<\/li>\n<li>Opera 11+<\/li>\n<\/ul>\n<p>Now, let\u2019s start the tutorial.<\/p>\n<h2>HTML Structure<\/h2>\n<p>We have 6 images, each with a different caption style.<\/p>\n<pre>\r\n&lt;div id=\"mainwrapper\"&gt;\r\n    &lt;!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser --&gt;\r\n    \r\n    &lt;!-- Image Caption 1 --&gt;\r\n    &lt;div id=\"box-1\" class=\"box\"&gt;\r\n        &lt;img id=\"image-1\" src=\"css3-image-captions\/1.jpg\"\/&gt;\r\n        &lt;span class=\"caption simple-caption\"&gt;\r\n            &lt;p&gt;Simple Caption&lt;\/p&gt;\r\n        &lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;!-- Image Caption 2 --&gt;\r\n    &lt;div id=\"box-2\" class=\"box\"&gt;\r\n        &lt;img id=\"image-2\" src=\"css3-image-captions\/2.jpg\"\/&gt;\r\n        &lt;span class=\"caption full-caption\"&gt;\r\n            &lt;h4&gt;Full Caption&lt;\/h4&gt;\r\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;\/p&gt;\r\n        &lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;!-- Image Caption 3 --&gt;\r\n    &lt;div id=\"box-3\" class=\"box\"&gt;\r\n        &lt;img id=\"image-3\" src=\"css3-image-captions\/3.jpg\"\/&gt;\r\n        &lt;span class=\"caption fade-caption\"&gt;\r\n            &lt;h4&gt;Fade Caption&lt;\/h4&gt;\r\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;\/p&gt;\r\n        &lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;!-- Image Caption 4 --&gt;\r\n    &lt;div id=\"box-4\" class=\"box\"&gt;\r\n        &lt;img id=\"image-4\" src=\"css3-image-captions\/4.jpg\"\/&gt;\r\n        &lt;span class=\"caption slide-caption\"&gt;\r\n            &lt;h4&gt;Slide Caption&lt;\/h4&gt;\r\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;\/p&gt;\r\n        &lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;!-- Image Caption 5 --&gt;\r\n    &lt;div id=\"box-5\" class=\"box\"&gt;\r\n        &lt;div class=\"rotate\"&gt;\r\n            &lt;!-- Rotating div --&gt;\r\n            &lt;img id=\"image-5\" src=\"css3-image-captions\/5.jpg\"\/&gt;\r\n            &lt;span class=\"caption rotate-caption\"&gt;\r\n                &lt;h4&gt;This is rotate caption&lt;\/h4&gt;\r\n                &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;\/p&gt;\r\n            &lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;!-- Image Caption 6 --&gt;\r\n    &lt;div id=\"box-6\" class=\"box\"&gt;\r\n        &lt;img id=\"image-6\" src=\"css3-image-captions\/6.jpg\"\/&gt;\r\n        &lt;span class=\"caption scale-caption\"&gt;\r\n            &lt;h4&gt;Free Style Caption&lt;\/h4&gt;\r\n            &lt;p&gt;Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;\/p&gt;\r\n        &lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt; &lt;!-- end of #mainwrapper--&gt;<\/pre>\n<h2>Basic CSS<\/h2>\n<p>Before styling any element, it\u2019s always a good practice to reset all properties using a CSS reset and give them default style values. This ensures all browsers render the results similarly (except perhaps IE6).<\/p>\n<p>The styles will be separated into a `style.css` file, keeping our HTML file neat. However, don\u2019t forget to add a link to the stylesheet inside the `<\/p>` tag to apply the styling rules.\n<p><code>&lt;link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\" media=\"screen\"&gt;<\/code><\/p>\n<p>Okay, let\u2019s begin styling the elements, starting with the `html` tag and the `#mainwrapper` ID:<\/p>\n<pre>\r\nhtml { background-color: #eaeaea; }\r\n\r\n#mainwrapper {\r\nfont: 10pt normal Arial, sans-serif;\r\nheight: auto;\r\nmargin: 80px auto 0 auto;\r\ntext-align: center;\r\nwidth: 660px;\r\n}<\/pre>\n<figure><img decoding=\"async\" alt=\"Basic CSS setup example\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img1.jpg\"><\/figure>\n<h2>Image Box Style<\/h2>\n<p>We apply some common styles to the boxes containing the images. The boxes will be displayed side-by-side using `float: left`. Notice that we also added the `overflow: hidden` property; this hides any part of the objects inside that extend beyond the div\u2019s boundaries.<\/p>\n<p>We also declare the `transition` property on every image inside the box, in case we need image transitions later.<\/p>\n<pre>\r\n#mainwrapper .box {\r\n    border: 5px solid #fff;\r\n    cursor: pointer;\r\n    height: 182px;\r\n    float: left;\r\n    margin: 5px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    width: 200px;\r\n    -webkit-box-shadow: 1px 1px 1px 1px #ccc;\r\n    -moz-box-shadow: 1px 1px 1px 1px #ccc;\r\n    box-shadow: 1px 1px 1px 1px #ccc;\r\n}\r\n\r\n#mainwrapper .box img {\r\n    position: absolute;\r\n    left: 0;\r\n    -webkit-transition: all 300ms ease-out;\r\n    -moz-transition: all 300ms ease-out;\r\n    -o-transition: all 300ms ease-out;\r\n    -ms-transition: all 300ms ease-out;\r\n    transition: all 300ms ease-out;\r\n}<\/pre>\n<figure><img decoding=\"async\" alt=\"Image box styling example\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img2.jpg\"><\/figure>\n<h2>Caption Common Style<\/h2>\n<p>The captions will have some common styles and also the `transition` property. Instead of using the `opacity` property, we use the RGBA color mode with `0.8` for the alpha channel. This makes the caption slightly transparent without affecting the text inside.<\/p>\n<pre>\r\n#mainwrapper .box .caption {\r\n    background-color: rgba(0,0,0,0.8);\r\n    position: absolute;\r\n    color: #fff;\r\n    z-index: 100;\r\n    -webkit-transition: all 300ms ease-out;\r\n    -moz-transition: all 300ms ease-out;\r\n    -o-transition: all 300ms ease-out;\r\n    -ms-transition: all 300ms ease-out;\r\n    transition: all 300ms ease-out;\r\n    left: 0;\r\n}<\/pre>\n<h3>Caption 1<\/h3>\n<p>The first caption will have a simple transition effect commonly used for captions. The caption will slide up from the bottom when we hover over the image. To achieve this, the caption has a fixed height of 30px, and we apply `bottom: -30px` to its position to hide it below the image initially.<\/p>\n<pre>\r\n#mainwrapper .box .simple-caption {\r\n    height: 30px;\r\n    width: 200px;\r\n    display: block;\r\n    bottom: -30px;\r\n    line-height: 25pt;\r\n    text-align: center;\r\n}<\/pre>\n<h3>Caption 2<\/h3>\n<p>The second type has the full width and height of the image\/box dimensions (200x200px). The transition creates a sliding door effect, moving from top to bottom.<\/p>\n<pre>\r\n#mainwrapper .box .full-caption {\r\n    width: 170px;\r\n    height: 170px;\r\n    top: -200px;\r\n    text-align: left;\r\n    padding: 15px;\r\n}<\/pre>\n<h3>Caption 3<\/h3>\n<p>The third caption will have a fading effect. So, we added `opacity: 0` for its initial state.<\/p>\n<pre>\r\n#mainwrapper .box .fade-caption, \r\n#mainwrapper .box .scale-caption {\r\n    opacity: 0;\r\n    width: 170px;\r\n    height: 170px;\r\n    text-align: left;\r\n    padding: 15px;\r\n}<\/pre>\n<h3>Caption 4<\/h3>\n<p>The fourth caption will slide from left to right. Therefore, we set `left: 200px` as its initial position.<\/p>\n<pre>\r\n\/* Caption 4: Slide *\/\r\n#mainwrapper .box .slide-caption {\r\n    width: 170px;\r\n    height: 170px;\r\n    text-align: left;\r\n    padding: 15px;\r\n    left: 200px;\r\n}<\/pre>\n<h3>Caption 5<\/h3>\n<p>The fifth caption will have a rotating effect. Not just the caption, but the image will also rotate. It\u2019s more like changing position through rotation.<\/p>\n<p>So, we add the `transform` property with a -180 degree rotation (unless you prefer rotating your monitor to read the caption).<\/p>\n<pre>\r\n#mainwrapper #box-5.box .rotate-caption {\r\n    width: 170px;\r\n    height: 170px;\r\n    text-align: left;\r\n    padding: 15px;\r\n    top: 200px;\r\n    -moz-transform: rotate(-180deg);\r\n    -o-transform: rotate(-180deg);\r\n    -webkit-transform: rotate(-180deg);\r\n    transform: rotate(-180deg);\r\n}\r\n\r\n#mainwrapper .box .rotate {\r\n    width: 200px;\r\n    height: 400px;\r\n    -webkit-transition: all 300ms ease-out;\r\n    -moz-transition: all 300ms ease-out;\r\n    -o-transition: all 300ms ease-out;\r\n    -ms-transition: all 300ms ease-out;\r\n    transition: all 300ms ease-out;\r\n}<\/pre>\n<h3>Caption 6<\/h3>\n<p>The last caption will use a scale transform. However, unlike the previous captions where the text appeared along with the transition, here the text will appear *after* the transition shift is complete. To achieve this, we add a `transition-delay` to the text elements, specifically the <code>&lt;h4&gt;<\/code> and <code>&lt;p&gt;<\/code> tags.<\/p>\n<pre>\r\n#mainwrapper .box .scale-caption h4,\r\n#mainwrapper .box .scale-caption p {\r\n    position: relative;\r\n    left: -200px;\r\n    width: 170px;\r\n    -webkit-transition: all 300ms ease-out;\r\n    -moz-transition: all 300ms ease-out;\r\n    -o-transition: all 300ms ease-out;\r\n    -ms-transition: all 300ms ease-out;\r\n    transition: all 300ms ease-out;\r\n}\r\n\r\n#mainwrapper .box .scale-caption h4 {\r\n    -webkit-transition-delay: 300ms;\r\n    -moz-transition-delay: 300ms;\r\n    -o-transition-delay: 300ms;\r\n    -ms-transition-delay: 300ms;\r\n    transition-delay: 300ms;\r\n}\r\n\r\n#mainwrapper .box .scale-caption p {\r\n    -webkit-transition-delay: 500ms;\r\n    -moz-transition-delay: 500ms;\r\n    -o-transition-delay: 500ms;\r\n    -ms-transition-delay: 500ms;\r\n    transition-delay: 500ms;\r\n}<\/pre>\n<figure><img decoding=\"async\" alt=\"Caption delayed text appearance\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img4.jpg\"><\/figure>\n<h2>Let\u2019s Make Them Move<\/h2>\n<p>In the following section, we will define the behavior of the captions when we hover over the images or boxes.<\/p>\n<h3>Caption Behavior 1: Show up.<\/h3>\n<p>For the first caption, we want it to appear (from the bottom) when hovering over the box. To achieve this movement, we use the `transform` property. The CSS code below tells the caption to move 100% of its height upwards (`translateY(-100%)`).<\/p>\n<pre>\r\n#mainwrapper .box:hover .simple-caption {\r\n    -moz-transform: translateY(-100%);\r\n    -o-transform: translateY(-100%);\r\n    -webkit-transform: translateY(-100%);\r\n    transform: translateY(-100%);\r\n}<\/pre>\n<p>If you don\u2019t understand the negative value for `translateY`, you might want to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/articles\/css3-transitions-and-transforms-from-scratch--webdesign-4975\">read this tutorial first<\/a> for more insight.<\/p>\n<h3>Caption Behavior 2: Move it down.<\/h3>\n<p>Conversely, the second caption will move down from the top. So, we use a positive value for `translateY`.<\/p>\n<pre>\r\n#mainwrapper .box:hover .full-caption {\r\n    -moz-transform: translateY(100%);\r\n    -o-transform: translateY(100%);\r\n    -webkit-transform: translateY(100%);\r\n    transform: translateY(100%);\r\n}<\/pre>\n<h3>Caption Behavior 3: Fade in.<\/h3>\n<p>The third caption is the easiest. When the box is hovered over, the caption\u2019s `opacity` changes to `1`, making it visible. Since we\u2019ve already added the `transition` property to the caption class, the transition will run smoothly.<\/p>\n<pre>\r\n#mainwrapper .box:hover .fade-caption {\r\n    opacity: 1;\r\n}<\/pre>\n<h3>Caption Behavior 4: Slide it to the left.<\/h3>\n<p>As mentioned before, this caption will slide in from the right. However, the image will also slide out to the left simultaneously. So, we have two CSS declarations.<\/p>\n<p>The CSS code below indicates that when hovering over the box, the caption will slide 100% of its width to the left (`translateX(-100%)`). Notice we use `translateX` because we want the slide to move horizontally.<\/p>\n<pre>\r\n#mainwrapper .box:hover .slide-caption {\r\n    background-color: rgba(0,0,0,1) !important;\r\n    -moz-transform: translateX(-100%);\r\n    -o-transform: translateX(-100%);\r\n    -webkit-transform: translateX(-100%);\r\n    opacity: 1;\r\n    transform: translateX(-100%);\r\n}\r\n<\/pre>\n<p>When hovering over the box, the image will slide out to the left.<\/p>\n<pre>\r\n#mainwrapper .box:hover img#image-4 {\r\n    -moz-transform: translateX(-100%);\r\n    -o-transform: translateX(-100%);\r\n    -webkit-transform: translateX(-100%);\r\n    transform: translateX(-100%);\r\n}\r\n<\/pre>\n<h3>Caption Behavior 5: Rotate it.<\/h3>\n<p>This caption is different from the rest; it rotates instead of sliding. When the box is hovered over, the `div` containing the image and the caption rotates -180 degrees counter-clockwise, hiding the image and showing the caption.<\/p>\n<pre>\r\n\/** Rotate Caption :hover Behaviour **\/\r\n#mainwrapper .box:hover .rotate {\r\n    background-color: rgba(0,0,0,1) !important;\r\n    -moz-transform: rotate(-180deg);\r\n    -o-transform: rotate(-180deg);\r\n    -webkit-transform: rotate(-180deg);\r\n    transform: rotate(-180deg);\r\n}\r\n<\/pre>\n<h3>Caption Behavior 6: Scale it up.<\/h3>\n<p>This caption combines several transform effects. When the box is hovered over, the image scales up by 140% (1.4) from its initial dimensions.<\/p>\n<pre>\r\n#mainwrapper .box:hover #image-6 {\r\n    -moz-transform: scale(1.4);\r\n    -o-transform: scale(1.4);\r\n    -webkit-transform: scale(1.4);\r\n    transform: scale(1.4);\r\n}\r\n<\/pre>\n<p>And if you saw the CSS under the <strong>Caption 6<\/strong> heading, we initially hid the text 200px to the left. The CSS code below tells the text to move back to its original position. So, the text will slide in from left to right.<\/p>\n<pre>\r\n#mainwrapper .box:hover .scale-caption h4,\r\n#mainwrapper .box:hover .scale-caption p {\r\n    -moz-transform: translateX(200px);\r\n    -o-transform: translateX(200px);\r\n    -webkit-transform: translateX(200px);\r\n    transform: translateX(200px);\r\n}\r\n<\/pre>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css3-image-captions\/\">Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css3-image-captions\/\">Download source<\/a>\n<\/div>\n<h2>Summary<\/h2>\n<p>Although these CSS features are cool, they are not yet widely applicable due to the browser support limitations mentioned earlier. However, keep experimenting with these new features, as this is the direction web page shaping will take in the future.<\/p>\n<h2>Credits<\/h2>\n<p>Image thumbnails used in the tutorial are screenshots taken from the following websites:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/abookapart.com\/\">A Book Apart<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.archiduchesse.com\/\">Archiduchesse<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vlog.it\/\">Vlog<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/\">Hongkiat<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thegreetingfarm.com\/\">The Greeting Farm<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>CSS3 is really powerful. It used to be that we needed images or many lines of JavaScript code to create a simple transition effect. Nowadays, we can achieve the same result using only CSS3. In this tutorial, we will show you how to create image captions with various transitions simply using CSS3. Demo Download source&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>6 Cool Image Captions with CSS3 - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS3 is really powerful. It used to be that we needed images or many lines of JavaScript code to create a simple transition effect. Nowadays, we can\" \/>\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.hongkiat.com\/blog\/css3-image-captions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 Cool Image Captions with CSS3\" \/>\n<meta property=\"og:description\" content=\"CSS3 is really powerful. It used to be that we needed images or many lines of JavaScript code to create a simple transition effect. Nowadays, we can\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-23T10:43:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:13:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img1.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"6 Cool Image Captions with CSS3\",\"datePublished\":\"2019-10-23T10:43:49+00:00\",\"dateModified\":\"2025-04-24T09:13:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/\"},\"wordCount\":939,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-image-captions\\\/img1.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/\",\"name\":\"6 Cool Image Captions with CSS3 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-image-captions\\\/img1.jpg\",\"datePublished\":\"2019-10-23T10:43:49+00:00\",\"dateModified\":\"2025-04-24T09:13:44+00:00\",\"description\":\"CSS3 is really powerful. It used to be that we needed images or many lines of JavaScript code to create a simple transition effect. Nowadays, we can\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-image-captions\\\/img1.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-image-captions\\\/img1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-image-captions\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"6 Cool Image Captions with CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"6 Cool Image Captions with CSS3 - Hongkiat","description":"CSS3 is really powerful. It used to be that we needed images or many lines of JavaScript code to create a simple transition effect. Nowadays, we can","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.hongkiat.com\/blog\/css3-image-captions\/","og_locale":"en_US","og_type":"article","og_title":"6 Cool Image Captions with CSS3","og_description":"CSS3 is really powerful. It used to be that we needed images or many lines of JavaScript code to create a simple transition effect. Nowadays, we can","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-10-23T10:43:49+00:00","article_modified_time":"2025-04-24T09:13:44+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img1.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"6 Cool Image Captions with CSS3","datePublished":"2019-10-23T10:43:49+00:00","dateModified":"2025-04-24T09:13:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/"},"wordCount":939,"commentCount":18,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img1.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/","name":"6 Cool Image Captions with CSS3 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img1.jpg","datePublished":"2019-10-23T10:43:49+00:00","dateModified":"2025-04-24T09:13:44+00:00","description":"CSS3 is really powerful. It used to be that we needed images or many lines of JavaScript code to create a simple transition effect. Nowadays, we can","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img1.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-image-captions\/img1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"6 Cool Image Captions with CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3XV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15247"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15247\/revisions"}],"predecessor-version":[{"id":74106,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15247\/revisions\/74106"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15247"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}