CSS边框悬停图像效果

Question

I'm trying to apply an hover effect above an image in a wordpress theme. The effect should show a border and a background with a text. The problem is that the border is wider and higher than the image and I cannot understand why. I've tried many solution but the result is always the same: the border appears only in my top and left side. I'm going crazy....

Here's the link at my page:

http://boscolo.dm-cloud.net/

Any suggestion?

Thanks in advance, Francesco

Answer 1

Add this code

.topImage2 .bordo {
    border: 0 solid #fff;
    box-sizing: border-box;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 78;
}

You just have to add box-sizing: border-box; to .topImage2 .bordo