海西网站开发公司：修改网站主题自定义网站css特效

海西网站开发公司：修改网站主题自定义网站css特效

上周我们海西网站开发公司发布了起源主题CSS技巧还有一些关于在Divi内部应用效果的评论。下面是一些CSS技巧，可以帮助您自定义divi主题项目和产品缩略图。每个示例都有一个动画预览和一个实现效果所需的自定义CSS块。一如既往，我们建议您通过儿童主题或ePanel中的自定义CSS框。

叠加缩放

默认情况下，项目和产品覆盖只会逐渐消失。下面的CSS将修改覆盖以缩放和淡入，当光标悬停时使用反向动画。

.et_overlay {

-webkit-transform: scale(.9);

-moz-transform: scale(.9);

-o-transform: scale(.9);

-ms-transform: scale(.9);

transform: scale(.9);

}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

}

覆盖滑动

下面的CSS将修改覆盖层，使其从缩略图底部逐渐消失，并在光标悬停时使用反向动画。

.et_overlay {

top:30px;

}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{

top:0;

}

重叠旋转

下面的CSS将修改覆盖以旋转和放大，当光标悬停时使用反向动画。

.et_overlay {

-webkit-transform:  scale(.6) rotate(-30deg);

-moz-transform:     scale(.6) rotate(-30deg);

-o-transform:       scale(.6) rotate(-30deg);

-ms-transform:      scale(.6) rotate(-30deg);

transform:          scale(.6) rotate(-30deg);

}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{

-webkit-transform:  scale(1) rotate(0deg);

-moz-transform:     scale(1) rotate(0deg);

-o-transform:       scale(1) rotate(0deg);

-ms-transform:      scale(1) rotate(0deg);

transform:          scale(1) rotate(0deg);

}

缩略图

海西网站开发公司下面的CSS会使整个缩略图在悬停时稍微上升。为了这个效果，覆盖层已经被移除，但是如果你愿意的话，你可以离开它。

.et_overlay {

display:none;

}

.et_portfolio_image, .et_shop_image  {

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.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);

transform: scale(1.04);

}

缩略图边界项目

下面的CSS将添加一个边框到您的项目缩略图。下面的示例与上面的“幻灯片向上”示例相结合，但是可以结合任何或不添加的修改。

.et_portfolio_image{

border: 5px solid #fff;

-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简单地修改现有的颜色和样式。这些修改将允许您定义覆盖背景色、边框样式、图标颜色和覆盖不透明度。

.et_overlay {

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 */

如果你喜欢这个主题小贴士，在博客上逛一逛，获取更多的免费资源，并让我们知道我们的下一个主题提示应该是什么！