CODEWITHSUNDEEP
htmlcsscss-animationscss-shapes
Robson
Robson

Reputation: 1277

Line with arrow animated on hover

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 :

line with an arrow in center on hover

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>

Upvotes: 5

Views: 2074

Answers (1)

web-tiki
web-tiki

Reputation: 103750

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)

Upvotes: 6

Related Questions