How to create a mouse-over effect on an image and position it where I want?

I want to replicate an effect of mouse over but what I have achieved so far is kind of bugged, the line with the effect is passing from one side to the other, and it is not only in the length of the text, which is what I want, I do not know how to position this div with link inside at the bottom of the image, as well as on the oscar page in BEST PICTURE.

How could I do that?

HTML Code:

<img style="margin-top:50px;" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="" />
<div class="button--border-rotated"><h1><a>text here</a></h1></div>

CSS:

div.button--border-rotated {
    display: none;
    position: relative;
    text-align: center;
    top: -170px;
}

div.button--border-rotated:hover, img:hover + div {
    display: block;
}






.button--border-rotated {
    border: none;
    position: relative;
}

a, a:active, a:focus, a:hover {
    text-decoration: none;
    color: inherit;
}

a {
    background-color: transparent;
}

.button--border-rotated:before {
    top: 0;
}

.button--border-rotated:after, .button--border-rotated:before {
    transition: top .3s ease-in-out;
    position: absolute;
    content: "";
    height: 2px;
    background-color: #bfa267;
    width: 100%;
    left: 0;
}

.button--border-rotated:after, .button--border-rotated:hover:before {
    top: 100%;
}

.button--border-rotated:after, .button--border-rotated:before {
    transition: top .3s ease-in-out;
    position: absolute;
    content: "";
    height: 2px;
    background-color: #bfa267;
    width: 100%;
    left: 0;
}

*, :after, :before {
    box-sizing: border-box;
}

Here it is the link of the jsfiddle , because the code Bootstrap v3.3.6 is long and did not fit the question. Here the page of oscar for reference, note that when hovering the mouse, appear 2 links in effect, that's what I'm trying to do.