Is it possible to have this Hover effect without SVG - html

Question

I'm trying to create something like this without SVG ? is it possible ?
Demo
Fiddle
.hover {
background: salmon;
text-align: center;
width: 70px;
height: 50px;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}
.hover:hover {
border: 2px solid grey;
}
<div class="hover">hover me</div>

Answer 1

Not exactly like it but almost there
.container {
display:inline-block;
overflow:hidden;
position:relative;
}
.container div {
position:relative;
width:200px;
height:200px;
background:grey;
transition:.5s all;
}
.container:before {
content:"";
position:absolute;
top:198px;
left:0;
width:200px;
height:2px;
z-index:2;
background:orange;
transition:.5s all;
transition-delay:.5s;
}
.container:after {
content:"";
position:absolute;
top:0;
right:00px;
width:2px;
height:200px;
background:orange;
transition:.5s all;
}
.container div:after {
top:0px;
content:"";
position:absolute;
width:200px;
height:2px;
background:orange;
transition:.5s all;
}
.container div:before {
top:0px;
left:0px;
content:"";
position:absolute;
width:2px;
height:200px;
background:orange;
transition:.5s all;
transition-delay:.5s;
}
.container:hover:after{
height:0;
}
.container:hover:before{
width:0;
}
.container div:hover:after {
width:0;
}
.container div:hover:before {
height:0;
}
<div class="container">
<div></div>
</div>

Answer 2

are you looking for something like this?
#keyframes width{
0%{width:100%; height:0%;}
50%{width:10%; height:10%;}
100%{width:0%; height:100%;}
}
#keyframes height{
0%{width:0%; height:100%;}
50%{width:10%; height:10%;}
100%{width:100%; height:0%;}
}
.effect{float:left; margin:15px; position:relative;}
.effect .content{ top:0px; left:0px; right:0px; bottom:0px; background-color:transparent; color:#000;}
.effect div{ width:100%; height:100%; position:absolute;
animation-fill-mode:forwards;}
.effect .top{top:-1px; left:-1px; border-top:1px solid #aaa; border-left:1px solid #aaa;}
.effect .bottom{bottom:-1px; right:-1px; border-bottom:1px solid #aaa; border-right:1px solid #aaa;}
.effect .left{left:-1px; bottom:-1px; border-bottom:1px solid #aaa; border-left:1px solid #aaa;}
.effect .right{top:-1px; right:-1px; border-right:1px solid #aaa; border-top:1px solid #aaa;}
.effect:hover .top{animation:width 0.7s ease-in 0s 1;}
.effect:hover .bottom{animation:width 0.7s ease-in 0s 1;}
.effect:hover .left{animation:height 0.7s ease-in 0s 1;}
.effect:hover .right{animation:height 0.7s ease-in 0s 1;}
.effect:not(:hover) .top{animation:height 0.7s ease-in 0s 1;}
.effect:not(:hover) .bottom{animation:height 0.7s ease-in 0s 1;}
.effect:not(:hover) .left{animation:width 0.7s ease-in 0s 1;}
.effect:not(:hover) .right{animation:width 0.7s ease-in 0s 1;}
<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>
<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>
<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>

Answer 3

Yes, though I can't write the CSS for you at the moment. It's simply a matter of using :hover to change the height and width or padding or border of that element. Use transitions for a smooth effect. You don't need animation or SVG at all.

Answer 4

CSS
.test {
display: inline-block;
border-radius: 0px;
border: 1px solid pink;
transition: all 1s;
}
.test:hover {
border-radius: 0 20px;
border: 20px solid rgba(0, 0, 0, 0.5);
background-color: purple;
color: yellow;
padding: 50px;
font-size: 30px;
}
<div class="test">hover me for fun and exitment</div>
.box {
fill: #4a2;
stroke: #412;
stroke-width: 1;
transition: all 1s;
}
.box:hover {
stroke-width: 5;
stroke: #22a;
fill: red;
}
<svg width="200px" height="200px" viewBox="0 0 100 100">
<rect class="box" x="20" y="50" width="50" height="30" />
</svg>