Is there a way to add a bevel effect to my hyperlink image so it stays in place without moving down? I need the bevel effect to be inside the image as it keeps shifting position. Any suggestions would be greatly appreciated.
I really need the bevel effect to stay inside the image without any movement. Any advice is welcome!
Thanks, 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>