div css制作创意的电器商城热销品牌商标图片布局，悬停圆形商标文字显示效果代码。

使用方法

1、head引入css文件

<link rel="stylesheet" href="css/style.css" />

2、body引入HTML代码

<div class="hotSaleBrand">

    <div class="cityColumnWarp clearfix">
	
		<div class="hotSaleBrand-box">
			<ul>
				<li>
					<a class="loadbg" href="#">
						<img src="img/T1ewYQBjLj1RCvBVdK.jpg" alt="海尔">
						<span>海尔</span>
					</a>
				</li>
				<li>
					<a class="loadbg" href="#">
						<img src="img/T1o9b_BCET1RCvBVdK.png" alt="西门子">
						<span>西门子</span>
					</a>
				</li>
				<li class="hotSaleBrand-middleIteam">
					<a class="loadbg" href="#">
						<img src="img/T15oYgBChT1RCvBVdK.png" alt="美的">
						<span>美的</span>
					</a>
				</li>
				<li>
					<a class="loadbg" href="#">
						<img src="img/T1ZoxgBCCT1RCvBVdK.jpg" alt="三星">
						<span>三星</span>
					</a>
				</li>
				<li>
					<a class="loadbg" href="#">
						<img src="img/T1YwLQBChT1RCvBVdK.png" alt="三洋">
						<span>三洋</span>
					</a>
				</li>
			</ul>
		</div>
		
		<div class="hotSaleBrand-box hotSaleBrand-box-right">
			<ul>
				<li>
					<a class="loadbg" href="#">
						<img src="img/T19HEjBCJT1RCvBVdK.png" alt="小天鹅">
						<span>小天鹅</span>
					</a>
				</li>
				<li>
					<a class="loadbg" href="#">
						<img src="img/T1OSEjBCZT1RCvBVdK.jpg" alt="博世">
						<span>博世</span>
					</a>
				</li>
				<li class="hotSaleBrand-middleIteam">
					<a class="loadbg" href="#">
						<img src="img/T1o9b_BCYT1RCvBVdK.jpg" alt="国美">
						<span>国美</span>
					</a>
				</li>
				<li>
					<a class="loadbg" href="#">
						<img src="img/T1BUZTByKT1RCvBVdK.png" alt="松下">
						<span>松下</span>
					</a>
				</li>
				<li>
					<a class="loadbg" href="#">
						<img src="img/T1toLTBXCT1RCvBVdK.jpg" alt="卡萨帝">
						<span>卡萨帝</span>
					</a>
				</li>
			</ul>
		</div>
		
	</div>
	
	<dl class="edit-mode">
		<dt>更多热卖品牌</dt>
		<dd><a href="#">韩电</a></dd>
		<dd><a href="#">海信</a></dd>
		<dd><a href="#">创维</a></dd>
		<dd><a href="#">荣事达</a></dd>
		<dd><a href="#">小鸭</a></dd>
		<dd><a href="#">LG</a></dd>
	</dl>
    
</div><!--END-->

资源出处：https://www.moyublog.com/codes/177.html