Div Box Hover

Hi Candyflipz,
If your image has both states in it with a transparant background, you could use clip to only show the part you want, an change it on hover.
Strangely I have hardly ever used clip it always seemed like too much hard work

 <div id="features" class="four columns">
<a href="">
	<img src="images/design.jpg">
	<h5>Modern Design</h5>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</a>
</div>

Say your image with the black and white cogs was 180px wide and 90px high.

#features a{
  color:#000;
  background:#FFF;
  display:block;
  height:260px;
  text-decoration:none;
}
#features a:hover{
  color:#FFF;
  background:orange;
}
#features img{
   position:absolute;  
   top:0;
   left:85px;
   clip:rect(0px 90px 90px 0px);
}
#features a:hover img{
   left:-5px;
   clip:rect(0px 180px 90px 90px);
}

Hey

thanks for your fast help, but there are still two problems

- the h5 tag doesnt change his color on mouseover
- how can i get the little lambs ear on the bottom right

greets steven

Or have you modified it? Either way, can we see what you're using?

Hey yeah the problem with the h5-tag was because I am using skeleton(http://www.getskeleton.com/) but I was able to fix it.

Now the only problem left is the edge on the right bottom,
It would be great if anynone could help me with this problem

Just make a small image of the corner ad add it as the background image on the link

#features a:hover{
  color:#FFF;
  background: url(my/corner.png) bottom right no-repeat orange;
}

Thanks, thats it