/    Sign up×
Community /Pin to ProfileBookmark

image hover effects (border/background color)

Copy linkTweet thisAlerts:
Apr 13.2006

This seems so simple, but I haven’t been able to work it out.

I just want to give an image a unique border and background color. It has 4px of padding, and i want to swap the background color for its :hover state.

i’d like the code to be as simple as possible, and I’m not going to have an active or visited state, so I’m hoping/thinking i can eliminate those.

I was hoping I could just do the <img id=”… thing but I can’t get the hover to work. I don’t think I have the syntax correct (a#rollover:hover img?)

the closest I could get was by putting the image in a div and applying some css I found, but it doesn’t quite work and it seems like it should be simpler.

[URL=http://www.cityscene.tv/imgtest.htm]Here’s the link[/URL]

thanks,

JP

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Apr 13.2006 — I think you want to apply the border to the image, not the link. E.g.
<i>
</i>#vidpic a img,
#vidpic a:link img,
#vidpic a:visited img {
background-color: transparent;
margin: 0;
padding: 4px;
border:1px solid #CCCCCC;
height: 94px;
width: 125px;
}
#vidpic a:hover img {
background-color:#FFCCFF;
margin: 0;
padding:4px;
border:1px solid #CCCCCC;
height: 94px;
width:125px;
}

Oh, and you were missing units on one of your borders.
Copy linkTweet thisAlerts:
@JPDauthorApr 13.2006 — Aha!

Thanks so much for clearing that up.

I'm running a hundred different ways today... getting sloppy.


thanks,


JP
Copy linkTweet thisAlerts:
@WebJoelApr 13.2006 — with your code. I get an interesting result without the actual image being available of course. -But by adding "display:block;" to the "#vidpic", I seem to get the effect that I think you're looking for when 'on hover' over the image iteself...
×

Success!

Help @JPD spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...