基于CSS3和HTML5图片加工前后对比代码

<div id="intelligence" class="section">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="images/explorer.jpg" />
<br />
<br />
<p class="text-center">原始图像</p>
<br />
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
<br />
<br />
<div class="frame-container"><div class="frame frame-square"><img src="images/explorer.jpg" /></div></div>
<br />
<p>广场</p>
</div>
<div class="col-md-4 text-center">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
<br />
<br />
<div class="frame-container"><div class="frame frame-landscape"><img src="images/explorer.jpg" /></div></div>
<br />
<p>景观</p>
</div>
<div class="col-md-4 text-center">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
<br />
<br />
<div class="frame-container"><div class="frame frame-portrait"><img src="images/explorer.jpg" /></div></div>
<br />
<p>肖像</p>
</div>
</div>
</div>
</div>

<div class="divider"></div>

<div id="customizable" class="section">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>站长素材</h2>
<p>照片加工前后对比</p>
<p class="coding">
<span class="colored">#HTML</span>
<br />
<div style="width: 300px; height: 150px;"> <br />   <img src="yourimage.jpg" <br />   <span class="colored">data-positionx="right"</span> <br />   <span class="colored">data-positiony="top"</span>/> <br /> </div>
</p>
</div>
<div class="col-md-4 text-center">
<br />
<div class="frame-container"><div class="frame frame-full"><img src="images/traveler.jpg" /></div></div>
<br />
<p>标准</p>
</div>
<div class="col-md-4 text-center">
<span class="special-arrow glyphicon glyphicon-menu-down" aria-hidden="true"></span>
<br />
<div class="frame-container"><div class="frame frame-optimum"><img src="images/traveler.jpg" /></div></div>
<br />
<p>最适合的图像</p>
</div>
</div>
</div>
</div>

<div class="divider"></div>