image hover text help

[Bones_Jones]

hi guys,

noob here.

i would like the texts to appear on image hover.
http://goo.gl/19eThb

i want images to go dark(like 80% black) and have white texts appear on hover.

i tried this tutorial which is exactly what i wanted to do, and i just couldn’t get it right. took me days and i’m giving up on it…

is there any tutorial out there? or maybe quick tips on how to learn this?

thx in advance!

[Paulie_D]

You say you’ve tried it.

Could you show us in a Codepen.io example what you tried?…It doesn’t matter if it doesn’t work…we can work with broken code.

[Soren]

try adding this to .imageHolder .caption

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
padding: 20px; // for example

css-tricks.com/box-sizing

If you add display: block; to the image then it will remove the tiny whitespace beneath it. Your black overlay box will then be the same size as the image.

[Soren]

If you can access the code add a class to the image maybe, or target the element that wraps it. Something like this

.imageHolder img {
  display: block;
}

because img is an inline element by default, we’re removing the extra space inline elements have.

[Author]

Posts