I'm trying to make an image display a border or box-shadow when hovering over a link, along with an animated circle around the round image. I've attempted to achieve this with the following CSS code, but it doesn't seem to be working.
https://codepen.io/anon/pen/mArEoX
<div class="sub-page-menu-item-w">
<div class="sub-page-menu-img">
<img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
</div>
<a href="/location/" class="sub-page-menu-a">Location</a>
</div>
.img-circle{
border-radius:100%;
}
.sub-page-menu-a:hover ~ .img-circle {
display: block;
box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
color:green !important;
font-size:18px !important;
}