Jump to content

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?!

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Hi dsonesuk,

 

Thanks for the advice...I see what you mean, but in making those changes, I've lost my margins (take a look at what happened @ annascherman.com) PLUS the opacity is till not right...It's almost like a dark tint on top rather than an opacity...

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...