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

I'm trying to replicate an effect of mouse over but what I've achieved so far is a bit biased, the line with the effect is passing from one side to the other, and not just the length of the text, which is what I want , I do not know how to position this div with link inside the bottom of the image, as well as the oscar page in BEST PICTURE .

How could I do this?

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's the jsfiddle link, since the Bootstrap v3.3.6 code is long and did not fit the question. Here the page of the oscar as a reference, note that when you move the mouse, 2 links appear with effect, that's it trying to do.