soft-embossed

CSS3 Featured Image Style and Hover Animation Effects

Lately I have been (slowly) working on an overhaul for my personal blog. I haven’t made a custom theme in well over a year. Also, I’m no designer. Making a theme is a long and drawn out process for me. But one thing I did know is that I wanted to really lighten up the site, make it not so dark, but also give it a bit of a fun feel. A great way to accomplish this is with some great CSS3 effects. One thing I had to work out was how to be able to use CSS3 on the featured image. I’m sure this is simple if you are experienced, but I hack my way through things, so this one took me a minute to figure out.

The first thing I did after visualizing my layout, was determine that I needed a featured image set up for this. I was working on a Featured Post type box on my home page, so I wanted a bit of a larger image, and I wanted a fun hover effect on the image. First up, in functions.php I dropped in the following:

<!-- You need to have featured images registered for this to work -->
<?php add_image_size( 'featured-thumb', 250, 250, true ); ?>

I won’t go into all the hoopla about registering featured images, you can check out a past tutorial if you need further info. So after I had my featured image set up, I tried calling it the standard way with the_post_thumbnail( ‘featured-thumb’ );. That worked fine, so I added my CSS3 effects and tested, and nothing worked. Now what’s wrong?

Well, it turns out that you need to set an image as a background image to be able to apply these CSS3 effects to them. Unfortunately, that means we have to rely on a little bit of inline css, which I hate doing. But if that’s the only way to make this work, I’ll live with it this one time. So what we need to do is just grab the url of the featured image, and spit it out in our inline css, like this:

			<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'featured-thumb' ); ?>
			<a href="<?php the_permalink(); ?>">
				<figure class="featured-thumb" style="background:url(<?php echo $src[0]; ?>) no-repeat center center; margin:0px;"></figure>
			</a>

You can see in line 1 we just grab the featured image’s url and assign it to the $src variable. Line 2, I set up a link to the post permalink. I figure if my image is going to have a cool hover effect, it should be a link too. In line 3 we set up our inline css, I’m using the html5 figure for my image, your’s could be a div or whatever. Notice in the inline css I had to set up my no-repeat, and I also had to give it a margin of 0. For some reason no images on my site have margins or borders, but as soon as I use an inline style, I got margins. So I had to set it up like that.

That was the hard part to figure out. Once you have your featured image set to be a background image, you can go wild. I’ll show you the css I used. My images all get rounded corners, with a hard embossed look. On hover, the rounded corners move in to turn the image into a circle. I can’t take any credit for the actual css, I got all that info from Web Designer Wall.

.featured-thumb {
	float: left;
	width: 250px;
	height: 250px;
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	position:relative;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
.featured-thumb:hover {
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
	}
.featured-thumb:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;

	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
	}

That’s all the CSS I used for my images. I won’t go into detail explaining it, as you can get a far better explanation by going to the link above. I just wanted to show you what I had decided to use. Everything works perfectly, and my Featured Post Featured Image is quite fun. Remember, some CSS3 is browser specific. The cool thing about this stuff is that any of the CSS that doesn’t work, still leaves your intended image. So it’s not a total fail.

If you do something cool with this technique, drop a comment and let me know what you’ve done!

Leave a Reply