如何将前端图片效果优化为长尾关键词？

本文共计490个文字，预计阅读时间需要2分钟。

下方的图是描述性画面效果原始的图片效果：下方的图是描述性画面效果的原始图片效果：最后的画面效果：就是鼠标指上去的时候，世界高楼四个大字上弹，下方显现描述性。

下边的是一个描述性的图面效果原始的图片效果：

下边的是一个描述性的图面效果

原始的图片效果： 最后的效果图：

就是鼠标指上去的时候，世界高塔四个大字上弹，下边显出描述性的语句~

代码如下：

上弹描述 .col-md-3 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width: 992px){ .col-md-3{ float: left; } .col-md-3 { width: 25%; }}.hovereffect { overflow: hidden; position: relative; text-align: center;}.hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81); transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);}.hovereffect:hover .overlay { background-color:rgba(67, 56, 79, 0.49);/**/}.hovereffect img { display: block; position: relative;}.hovereffect h4 { text-transform: uppercase; color: #fff;/*初始图片文字文字的颜色*/ text-align: center; position: relative; font-size: 1.3em; padding: 10px 0; width: 60%; margin: 0 auto; font-weight: 600; background: rgba(0, 186, 102, 0.55);/*初始图片文字文字的背景*/ -webkit-transform:translateY(60px); -ms-transform:translateY(60px); transform:translateY(60px); -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81); transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);}.hovereffect:hover h4 { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px);}.hovereffect p{ text-transform: uppercase; color: #fff; background-color: transparent; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81); transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81); font-weight: normal; margin: 0; padding: 3em 2em 0em; letter-spacing: 2px;}.hovereffect:hover p{ opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}

世界高塔

东方明珠