Hey I would love to know what you think while reading my posts. Please comment!.

CSS image captions

I have only recently discovered this, but it is something I thought was worth noting down on my blog for my future reference if anything!

Easy CSS image captions using :after and the attr attribute.

##HTML

<div class="caption" title="Hello World!">    
    <img src="http://fillmurray.com/400/400" />    
</div>

##CSS

.caption:after{
    content: attr(title);
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    font-weight: bold;
    background: rgba(111, 111, 111, .3);
    padding: 20px;
    display: none;
}

.caption:hover:after{
    display: block;
}

##Results

aww sad Bill Murray!

Please note my blog is applying additional styles to the image on hover!

As usual please let me know what you think about my blog, my posts, content, and style. Leave a comment below!


About Me

Tim James I'm Tim, a web applications developer from Glasgow, Scotland. Currently working for Kingfisher Systems Ltd, building bespoke systems within the Car Auction industry.

  • C#
  • VB.NET
  • ASP.NET
  • .NET MVC
  • Web API
  • Razor
  • HTML5
  • CSS3
  • jQuery
  • WCF
  • SQL
  • knockout.js
  • Angularjs
  • AJAX
  • APIs
  • SignalR
Why not follow me on twitter? Follow me on Twitter