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

css:

#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;
}

html:

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

在网上看到一个左右移动的css效果挺不错的，记录下：

css：

/**左右移动样式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:

<!--左右移动样式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在样式中的用法：

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

html：

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

附一个下载地址： http://download.youkuaiyun.com/detail/he20101020/6681793