简易实用的CSS产品图文卡片

一款简易实用的CSS产品图文卡片，产品标题右上角有一个平滑切换的文字效果，“立即购买”按钮也有一个鼠标悬停的文字图标切换特效，右侧的产品图片在鼠标悬停时显示详细说明文字列表，文字列表悬停有放大效果。

分类：文字特效 > 文字列表难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需远程调用font-awesome图标字体库，并引入本地样式文件，代码如下：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了div的嵌套结构，里面有图标i标签、span文字标签、ul无序列表等，代码如下：

<div id="container">
	<!-- Start	Product details -->
	<div class="product-details">
		<!-- Product Name -->
		<h1>花之物语</h1>
	    <!-- <span class="hint new">新品</span> -->
	    <!-- <span class="hint free-shipping">包邮</span> -->
	    <!-- the Product rating -->
		<span class="hint-star star">
			<i class="fa fa-star" aria-hidden="true"></i>
			<i class="fa fa-star" aria-hidden="true"></i>
			<i class="fa fa-star" aria-hidden="true"></i>
			<i class="fa fa-star-half-o" aria-hidden="true"></i>
			<i class="fa fa-star-o" aria-hidden="true"></i>
		</span>

		<!-- The most important information about the product -->
		<p>“集装箱园艺特别好，天使花将保持盛开的夏天即使除去旧花。一旦足够高，切割，带他们进来，你会闻到一个淡淡的香味，有的说是让人联想到苹果。”</p>

		<!-- Control -->
		<div class="control">
			<!-- Start Button buying -->
			<button class="btn">
				<!-- the Price -->
				<span class="price">¥109</span>
				<!-- shopping cart icon-->
			    <span class="shopping-cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
				<!-- Buy Now / ADD to Cart-->
			    <span class="buy">立即购买</span>
		 	</button>
			<!-- End Button buying -->
		</div>
	</div>
	<!-- End Product details -->

	<!-- Start product image & Information -->
	<div class="product-image">
		<img src="https://sc01.alicdn.com/kf/HTB1Cic9HFXXXXbZXpXXq6xXFXXX3/200006212/HTB1Cic9HFXXXXbZXpXXq6xXFXXX3.jpg" alt="Omar Dsoky">
		<!-- product Information-->
		<div class="info">
			<h2>宝贝描述</h2>
			<ul>
				<li><strong>光照：</strong>全日照</li>
				<li><strong>土壤：</strong>潮湿</li>
				<li><strong>区域：</strong>9 - 11</li>
				<li><strong>高度：</strong>2 - 3 英尺</li>
				<li><strong>开花：</strong>中夏至中秋</li>
				<li><strong>特点：</strong>耐热性好</li>
			</ul>
		</div>
	</div>
	<!-- End product image -->
</div>