鼠标移动到图片上，图片显示阴影边框，其他一些样式积累

#md-large-widget-content hover img {
box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
}
.ct-coll-item a.ct-coll-thumb:hover img{
box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
opacity: 0.9;
}

<div class="ct-coll-item">
<a class="ct-coll-thumb" href="###">
<img src="image/a.jpg"/>
</a>
</div>

/**左右移动样式start*/
.ct-post-nav{
clear:both;
padding-top:30px;
margin-top:20px;
border-top: 1px solid whiteSmoke;
}
.ct-post-nav a img,
.ct-post-nav a:hover img{
margin: 0px 10px 0px 0px;
width: 50px;
}
.ct-post-nav .ct-post-prev a img{
margin: 0px 10px 0px 0px;
float: left;
}
.ct-post-nav .ct-post-next a img{
margin: 0px 0px 0px 10px;
float: right;
}
.ct-post-nav div{
display:block;
width:245px;
position:relative;
font-size:14px;
color: #999;
}
.ct-post-nav div strong{
color: #BBB;
text-transform: uppercase;
font-size: 11px;
}
.ct-post-nav div a{
display:block;
}
.ct-post-nav div.ct-post-prev{
float:left;
padding-left:40px;
}
.ct-post-nav div.ct-post-next{
float:right;
text-align:right;
padding-right:40px;
}
.ct-post-nav div a:after{
position:absolute;
color:#F4F5F7;
font-size:56px;
font-weight: normal;
margin-top:-11px;
height:22px;
line-height:22px;
top:55%;
}
.ct-post-nav .ct-post-prev a:after{
content: '«';
left:0px;
}
.ct-post-nav .ct-post-next a:after{
content: '»';
right:0px;
}
.ct-post-nav div:hover a:after{
color:#54829B;
}
.ct-post-nav div:hover a{
color:#333;
}
/**左右移动样式end*/

<!--左右移动样式html start-->
<div class="ct-post-nav">
<div class="ct-post-prev">
<a></a>
</div>
<div class="ct-post-next">
<a></a>
</div>
</div>
<!--左右移动样式html end-->

/**测试before的使用 当然还有after*/
.icon-right:before {
content: "abcdefg";
}

<!--测试before的使用-->
<p>
<span class="arrowIcon icon-right">xx</span>
</p>