海西网站开发公司:修改网站主题自定义网站css特效
上周我们海西网站开发公司发布了起源主题CSS技巧还有一些关于在Divi内部应用效果的评论。下面是一些CSS技巧,可以帮助您自定义divi主题项目和产品缩略图。每个示例都有一个动画预览和一个实现效果所需的自定义CSS块。一如既往,我们建议您通过儿童主题或ePanel中的自定义CSS框。
叠加缩放
默认情况下,项目和产品覆盖只会逐渐消失。下面的CSS将修改覆盖以缩放和淡入,当光标悬停时使用反向动画。

-webkit-transform: scale(. 9 ); |
-moz-transform: scale(. 9 ); |
-ms-transform: scale(. 9 ); |
.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{ |
-webkit-transform: scale( 1 ); |
-moz-transform: scale( 1 ); |
覆盖滑动
下面的CSS将修改覆盖层,使其从缩略图底部逐渐消失,并在光标悬停时使用反向动画。

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{ |
重叠旋转
下面的CSS将修改覆盖以旋转和放大,当光标悬停时使用反向动画。

-webkit-transform: scale(. 6 ) rotate( -30 deg); |
-moz-transform: scale(. 6 ) rotate( -30 deg); |
-o-transform: scale(. 6 ) rotate( -30 deg); |
-ms-transform: scale(. 6 ) rotate( -30 deg); |
transform: scale(. 6 ) rotate( -30 deg); |
.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{ |
-webkit-transform: scale( 1 ) rotate( 0 deg); |
-moz-transform: scale( 1 ) rotate( 0 deg); |
-o-transform: scale( 1 ) rotate( 0 deg); |
-ms-transform: scale( 1 ) rotate( 0 deg); |
transform: scale( 1 ) rotate( 0 deg); |
缩略图
海西网站开发公司下面的CSS会使整个缩略图在悬停时稍微上升。为了这个效果,覆盖层已经被移除,但是如果你愿意的话,你可以离开它。

.et_portfolio_image, .et_shop_image { |
-moz-transition: all 0.3 s; |
-webkit-transition: all 0.3 s; |
.et_portfolio_image:hover, .et_shop_image:hover { |
-webkit-transform: scale( 1.04 ); |
-moz-transform: scale( 1.04 ); |
-o-transform: scale( 1.04 ); |
-ms-transform: scale( 1.04 ); |
缩略图边界项目
下面的CSS将添加一个边框到您的项目缩略图。下面的示例与上面的“幻灯片向上”示例相结合,但是可以结合任何或不添加的修改。

-moz-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 ,. 3 ); |
-webkit-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 ,. 3 ); |
box-shadow: 0 1px 4px rgba( 0 , 0 , 0 ,. 3 ); |
叠加自定义颜色
您可以使用下面的CSS简单地修改现有的颜色和样式。这些修改将允许您定义覆盖背景色、边框样式、图标颜色和覆盖不透明度。
background : rgba( 50 , 200 , 235 , 0.6 ); /* overlay background color */ |
border : none ; /* border style */ |
.et_shop_image .et_overlay:before, .et_portfolio_image .et_overlay:before{ |
color : #FFF !important ; /* + icon color */ |
.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay { opacity: 1 ; } /* overlay opacity */ |
如果你喜欢这个主题小贴士,在博客上逛一逛,获取更多的免费资源,并让我们知道我们的下一个主题提示应该是什么!