6 replies [Last post]
Candyflipz
Candyflipz's picture
Offline
newbie
Last seen: 10 years 1 week ago
Timezone: GMT+2
Joined: 2012-08-08
Posts: 7
Points: 9

Hey

first sorry for my bad englisch, but i'm german Wink

my html code atm is:

<div id="features" class="four columns">
	<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>
</div>


left normal - right hover

and features:hover should do:
- color the background
- color all the text white
- change the image (grey to white)
- make the whole div a link
- make a lambs ear on the bottom right

thanks alot for all help

greets steven

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 17 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Candyflipz,If your image

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 Smile

 <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);
}

Candyflipz
Candyflipz's picture
Offline
newbie
Last seen: 10 years 1 week ago
Timezone: GMT+2
Joined: 2012-08-08
Posts: 7
Points: 9

Hey thanks for your fast

Hey

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

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

greets steven

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Are you using Tony's code as is?

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Candyflipz
Candyflipz's picture
Offline
newbie
Last seen: 10 years 1 week ago
Timezone: GMT+2
Joined: 2012-08-08
Posts: 7
Points: 9

Hey yeah the problem with the

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 Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 17 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Just make a small image of

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;
}

Candyflipz
Candyflipz's picture
Offline
newbie
Last seen: 10 years 1 week ago
Timezone: GMT+2
Joined: 2012-08-08
Posts: 7
Points: 9

Thanks, thats it

Thanks, thats it Smile