Bevel on hover is it possible?

Question

how do i add bevel to my hyperlink image as it keep moving down a bit? need bevel inside image as it keeps moving! I would be very grateful for any suggestions...

need bevel inside image as it keeps moving! I would be very grateful for any suggestions...

thx stewart

body {
    background-color: #6B6B6B;
    margin-top: 100px;
    margin-left: 0px;
    
    font-family: Arial;
    color: #D7D7D7;
    font-size: 12px;
    font-weight: 100;
    line-height: .2;
    letter-spacing: 1px;
}   
    .vids {
    position: fixed;
    top: 100px;
    left: 100px;
}
    /*............... border on hover (with bevel)...............*/
    
    .border {
    border: solid 0px #02eee7;
    transition: border-width 0.2s linear;
}
    .border:hover { 
    border-width: 5px;
    }
  /*............... bevels ...............*/
    img#bevel {
    border-radius: 20px;
}
    /*........ soft-lightup on hover ........*/
    
    a { 
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
    /*......................................*/
    
    a:link {
    text-decoration: none;
    color: #8f8f8f;
}
    a:visited {
    text-decoration: none;
    color: #8f8f8f;
}
    a:hover {
    color: #02eee7;
    text-decoration: none;
}
    a:active {
    text-decoration: none;
    color: #8f8f8f;
}

<div class="vids" align="center">
<a href="vid1.htm"><img src="http://wizzfree.com/pix/vid00.png" class="border" id="bevel" width="150" height="100"/></a><p></p>
<b>10 Tips</b><p>01 Link title text here</p>
<p></p>
</div>

Answer 1

I presume that your image is square shaped. Maybe you could do an inward-outward growth with box shadow? While yes, that it is longer, or you can do positioning. Solid as border style is different to Outset, so maybe i don’t get your picture.

box-shadow: 
inset 2px 2px 0 #02eee7,
inset -2px 2px 0 #02eee7,
3px 3px 0 #02eee7,
-3px 3px 0 #02eee7,
/* and so on */
;