海西网站开发公司:修改网站主题自定义网站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{
    border5px 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(502002350.6); /* overlay background color */
    bordernone/* 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 */


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





二维码