Hover animated line

Question

How can I make one line effect animated when I hover over a line with an arrow ?

I tried to do this with a frame, but this arrow and line should be in the image with a transparent background.

I have one line, as on the top of this image, and I need to make a line with an arrow and hover over the bottom of this image:

Here is 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> 

Answer 1

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

In the following example, I used 2 pseudo-elements to make a border and skew them to make a transparent triangle when you hover 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 to support the browser (see canIuse for more information)