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

Question

I’m looking to replicate an effect of mouse over but what I’ve achieved so far is a bit buggy, the line with the effect is going from one side to the other, and it’s not just the length of the text, which is what I want, I don’t know how to do 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 is the link from jsfiddle, for the code Bootstrap v3.3.6 It’s long and it didn’t fit the question. Here the page of oscar as a reference, note that when passing the mouse, appear 2 links with effect, this is what I’m trying to do.

Answer 1

I created a div father to the content and left the text as position absolute and with bottom 0.

https://jsfiddle.net/6k2Lhaje/191/