Line with arrow animated on hover

Question

How can I make one line effect animated on hover to line with arrow ?

I tried to do this with border, but this arrow and line must be on image with a transparent background.

I have one line like on the top of this image and I need to make the line with and arrow on hover like on the bottom of this image :

Here's my code:

* {
  box-sizing: border-box;
}
.bg {
  margin: 0 auto;
  background: url('http://i.imgur.com/RECDV24.jpg') center no-repeat;
  background-size: cover;
  width: 100vh;
  height: 100vh;
  position: relative;
  padding: 1em;
}
.line {
  height: 2px;
  position: absolute;
  top: 50%;
  left: 1em;
  right: 1em;
  background: #fff;
}
.bg:hover .line:after {
  height: 10px;
  width: 10px;
  position: absolute;
  content: '';
  background: transparent;
  border: 2px solid #fff;
  border-top-width: 0px;
  border-left-width: 0px;
  transform: rotate(45deg);
  bottom: -6px;
  left: calc(50% - 4px);
}

<div class="bg">
  <div class="line"></div>
</div>

*If* the concept of using border lines works then you can simply have an element on top of the image with appropriate margin and then use the border lines in the CSS? Does border lines animation work for what you need? — Martin, Jan 13 '16 at 10:43
Please upload, your demo code, So, we can understand actual problem. — Shurvir Mori, Jan 13 '16 at 10:45
I updated my problem description. I want to make effect on line just like in the image bottom on hover. — Robson, Jan 13 '16 at 11:01

score 6 · Accepted Answer · edited May 23 '17 at 11:52

To make the transparent triangle, you can use one of the approaches described in Border with a transparent or same color centred arrow on a div.

In the following example, I used 2 pseudo elements to make the border and skew them to make the transparent triangle on hover of the .bg element :

*{
  box-sizing:border-box;
}
.bg{
  margin:0 auto;
  background: url('http://i.imgur.com/RECDV24.jpg') center no-repeat;
  background-size: cover;
  width:100vh;
  height:100vh;
  position:relative;
  padding:1em;
}
.line{
  margin-top:50vh;
  overflow:hidden;
}
.line:before, .line:after{
  content:'';
  float:left;
  display:block;
  width:50%;
  border-top:2px solid #fff;
  box-sizing:border-box;
  transform-origin:0 100%;
}
.bg:hover .line:before{
  transform: skewX(45deg);
  border-right:3px solid #fff;
  height:20px;
}
.bg:hover .line:after{
  transform: skewX(-45deg);
  border-left:3px solid #fff;
  margin-left:-3px;
  height:20px;
}

<div class="bg">
  <div class="line"></div>
</div>

Note that you will need to add vendor prefixes for browser support (see canIuse for more info)

Line with arrow animated on hover

1 Answers1