Support NeoGAF

[Boards of Canada]

I have a DIV that looks like this:

<div id="event">
<img src="blah.jpg">
</div>

And my CSS looks like this:

#event { width:160px; float:left; background:#fff; margin:0 10px 10px 0; text-align:center; box-shadow:0 1px 5px rgba(0,0,0,0.2); }
#event:hover { background: linear-gradient(top, #494949 0%,#1d1d1d 100%); color: #fff; }

How do I make it so when I hover, I can do something to the image, like add a box-shadow or something. I tried #event:hover > div, but that didn't do it.

 

[scurker]

You need a rule like this:

#event:hover img {
  ...
}

 

[Korey]

I have a DIV that looks like this:

<div id="event">
<img src="blah.jpg">
</div>

And my CSS looks like this:

#event { width:160px; float:left; background:#fff; margin:0 10px 10px 0; text-align:center; box-shadow:0 1px 5px rgba(0,0,0,0.2); }
#event:hover { background: linear-gradient(top, #494949 0%,#1d1d1d 100%); color: #fff; }

How do I make it so when I hover, I can do something to the image, like add a box-shadow or something. I tried #event:hover > div, but that didn't do it.

#event:hover > div doesn't work because #event is the div

#event:hover img should work like scurker said

 

[scorcho]

<div id="X">
<a href="X" class="Y"></a>
</div>

for DIV X - specify height and width. the image should be put into the background-image tag.

for A CLASS Y - height and width is 100%, display:block. from there you can use alpha colors or a 24-bit PNG to overlay on top to animate the rollover using a:hover as a background image or color. this will make it compatible with IE 7 and below.