Jump to content

Dark Hover Feature


ann_ascherman

Recommended Posts

Hi,

 

The website I am currently working on is this: annascherman.com

 

I have set up the image gallery to be an un-ordered list so that I could achieve the irregular grid. I would love for the images to have a slight dark tint on top of them which goes away when you hover over an image (see example here: http://www.wallpaper.com/design/wallpaper-power-200) but for some reason, whenever I add a hover pseudo-element, I get a black background behind the image (I know this because it is also appearing to the right of the image, which I assume has to do with how I set things up as an un-ordered list - it is reading this space as part of the background).

 

What am I doing wrong?!

Link to comment
Share on other sites

Sort out, and validate your html, you have ul directly following the parent ul, it looks as though what was once a responsive site, is now complete opposite, it is really messed up.

Remove padding, margin on image.

Add margin: 10px; display: block: background-color: #000; to anchor surrounding image.

 

Add opacity to these images around 0.5, you already have hover to reset to 1.

 

and that should be itt.

Link to comment
Share on other sites

Yes that rally ia a disaster. Trying to test or fix anything in a layout with such an unstable structure is a waste of time and effort, because it will be completey unreliable.

 

Plus you have issues beyond structure and into semantics. It will make zero sense to anyone using a reader which brings up the other accessibility and that is contrast. You already have some text that has a high enough luminosty value that it will be difficult for some to read on a light background, and probably a dark one os while because it is in a mid range that can be problematic the difference in the forground and background is around 100, At that level it is about 50% too light. A difference if 125 to 150 is marginal, below 125 about 35-40% of people will not be able to read it without zooming and where you have it it becomes unradable for anyone with even minor vision problems.

 

If you are looking at doing additional things to reduce contrast, you are really going in the wrong direction. If the site is just for you own pleasure, then it does not make much difference what it looks like to others, but if you want others to use the site you need to put usability and accessibility ahead of what you think looks nice.

 

What I see is typical of Wordpress sites. It is absolutely the wrong way to learn because it encourages bloated badky written and unmaintainable code.

Link to comment
Share on other sites

I actually think I understand the issue now, however I am not sure how to solve it! Any where that I have a <div> to separate my list into different columns, there is a margin that is being created in addition to the one that I've set up under the <my-ul> tag.

 

Anyone have any ideas how I can modify this so that all margins around the photos appear equal?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...