0

I currently have a hover image and I am looking to add a right border #000 that only takes up 80% of the full length of the image. I have been trying to modify other "half border" codes to work for the right border to no avail.

Anyone know how?

Lucas
  • 5
  • 1
  • 3
    What gave you tried so far and do you have any code snippets for us to look at that are causing you problems? – digwig May 26 '15 at 14:27

2 Answers2

1

Disclosure: Copied from here with a few changes.

Would this work:

#holder {
        border: 1px solid #000;
        height: 200px;
        width: 200px;
        position:relative;
        margin:10px;
} 
#mask {
        position: absolute;
        top: -1px;
        left: -1px;
        height: 80%;
        width: 1px;
        background-color: #fff;
}
<div id="holder">
        <div id="mask"></div>
</div>
Community
  • 1
  • 1
Zac Grierson
  • 656
  • 1
  • 6
  • 21
0

My suggestion would would be to create an overlay for your image that is 80% of its height.

.image-container {
  position: relative;
  width: 50%;
}

.image-overlay {
  width: 100%;
  height: 80%;
  border-right: 1px solid #000;
}

.image-with-overlay {
  position: relative;
}

Here's a working example: http://jsfiddle.net/dLk6xrvr/

danielm
  • 66
  • 5