CODEWITHSUNDEEP
htmlcssborder
Lucas
Lucas

Reputation: 5

Add half right border to hover image

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?

Upvotes: 0

Views: 307

Answers (2)

danielm
danielm

Reputation: 66

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/

Upvotes: 0

Zac Grierson
Zac Grierson

Reputation: 665

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>

Upvotes: 1

Related Questions