Lately at Superposition Kitty we’ve been adopting more of a photo-blog feel to some of our posts. If you’re recently read Apple Crumble The Retarded Way then you would’ve noticed that text is displayed in a caption inside the image when you mouse over it. The original idea for this was taken from The Guardian website, where if you hover over any images on the main page a caption will display giving you more information on the linked story.
I spent hours coming up with what I thought would be the most perfect solution to this (I didn’t want any of the extra JavaScript effects that The Guardian used), but my approach turned out to be too narrow — working only in Firefox. So I turned to my good old friend Google, and started searching. I eventually came up with this CSS On-Hover Image Captions tutorial by Soh Tanaka. Being pure CSS and working in all browsers (including Internet Explorer 6 and 7) it seemed to be exactly what I wanted. You can view a page demonstrating how his version works here, and I recommend that you read through his post first to get a greater idea of how these little CSS tricks achieve such an effect. Read on past the demo image below to see how you can get this up and running on your blog.
The very first thing we’re going to do is create a CSS file. I try and contain most of my CSS files in their own folder, and have thus created a file named hover.css in /wp-content/themes/mytheme/css/, which will then be filled with my customised version of Soh Tanaka’s code as below:
.imgteaser {
padding: 0px;
margin: 0px;
margin-bottom: 18px;
overflow: hidden;
float: left;
position: relative;
}
.imgteaser a {
text-decoration: none;
margin-top: -18px;
float: left;
}
.imgteaser a:hover {
cursor: pointer;
}
.imgteaser a img {
float: left;
margin-bottom: 0px;
border: 1px solid #FDFDFD;
}
.imgteaser a:hover .desc {
display: block;
font-size: 12px;
line-height: 18px;
font-weight: normal;
color: #FDFDFD;
position: absolute;
bottom: 1px;
left: 1px;
padding: 0px 3px 0px 3px;
margin: 0;
width: 454px;
background: #000;
filter:alpha(opacity=80);
opacity:.80;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.imgteaser a .desc { display: none; }
.imgteaser a:hover .more { visibility: hidden;}
If you want more information on what each bit of CSS does, then once again I’d recommend reading the original post. This file then has to be linked in the header of your WordPress theme, so make sure to put the code below between the <head> and </head> tags (changing as necessary):
<link rel="stylesheet" href="http://yourwebsite.com/wp-content/themes/yourtheme/css/hover.css" type="text/css" media="screen" />
It really is as simple as that! Now whenever we want to display one of these beautifully captioned images we can just modify the code below when writing a new post (make sure that you are writing in HTML Mode and not Visual Mode):
<div class="imgteaser"> <a href="#"> <img src="IMAGE LINK" /> <span class="desc">TEXT</span> </a> </div>
To see an example of this in action, simply scroll back up to the top and move your mouse over the picture of the bike.