/    Sign up×
Community /Pin to ProfileBookmark

making an image dimmer on hover

Copy linkTweet thisAlerts:
Feb 24.2011

Hello guys,

I’m currently creating a gallery of images and I’m wonder how I can make the image go dimmer on hover.

I’m not sure whether CSS can achieve this or do I require js, if i’m on the wrong forum, I apologize.

The way I do it now is use css to set the background of the table cell containing the image black, and I set the opacity of the image on hover to say 0.7, so that the image would seem like it’s dimming when hovered.

However when the images are loading the table looks really bad as my page has a white background. Is there a more effective way of achieving this?

thanks!

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaFeb 24.2011 — That's basically how I would have done it.

I assume you're concened about the black table cells appearing before all the images are loaded. If so, maybe try setting the background of the cells to black in a window.onload after all the images have been loaded. In theory, you shouldn't then see any black cells at all during page load.
Copy linkTweet thisAlerts:
@zentenkauthorFeb 24.2011 — Thanks for your reply tirna,

that is exactly what I mean, but I'm a complete noob at JS, I looked around on the net but couldn't figure out what I need to do, please help!
Copy linkTweet thisAlerts:
@moritanaFeb 24.2011 — with trina's way, you should add this script AFTER the images:
[code=html]
<script>
tds = document.getElementsByClassName('blackTd');

for (x = 0; x >= 0; x++)
{
tds[x].style.background = 'black';
}
</script>

[/code]this searches for all the elements with 'blackTd' class in the document and changes them to black.

if you put it after the images, the page should first load all the images, and then change the background of the cells.

tho i havent tried it, so....
Copy linkTweet thisAlerts:
@JPnycFeb 24.2011 — I would think just changing the opacity would make it appear dimmer.
Copy linkTweet thisAlerts:
@zentenkauthorFeb 24.2011 — hey moritana, thanks again.

I tried the code and it works but because although the images are loaded first the rest of the code is loaded already before the images are actually retrieved. I tried to implement the window.load but I don't think I'm doing it right.

[CODE]
<head>
<script type="text/javascript">
function black_background() {
tds = document.getElementsByClassName('thumbnail_background');

for (x = 0; x >= 0; x++)
{
tds[x].style.background = 'black';
}
}



window.onload=black_background();
</script>
</head>


[/CODE]

Also @JPync, Because my images have a completely white background and my website has a completely white background, on hover the images just become harder to see and not dimmed.
Copy linkTweet thisAlerts:
@moritanaFeb 24.2011 — well, you can always use [CODE]setTimeout("black_background()", 1000)[/CODE]
so the background only shows up after a second, hopefully after all the images are there, but it also means that for the first second, the images will be transparent rather than dim.
Copy linkTweet thisAlerts:
@zentenkauthorFeb 24.2011 — thanks moritana,

i got windows.onload to work, thanks for all ur help!
×

Success!

Help @zentenk 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.24,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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