Question

我想知道在鼠标悬停时使用了哪些插件来保护图像颜色或做出图像响应。

我是wordpress的新手，任何人都可以给我最好的插件列表。

我正在编辑这个主题：

http://themeforest.net/item/overgrowth-retina-responsive-multipurpose-theme/full_screen_preview/4896083

请检查此主题，在主页Scrolldown页面中“BLOG”部分将会出现

请将鼠标放在图像上，然后图像会响应。

我正在寻找这个。

我购买了这个主题，我正在编辑它，但我无法执行此功能。

我不知道这个名字是什么，所以我无法在互联网上搜索。

所以请告诉我，我将在WordPress中搜索这些内容。如何通过代码或通过插件实现？

我的过度生长视网膜主题是否有这个插件？

非常欢迎任何想法或建议。

Answer 1

使用CSS3实现此效果：

1]设置图像容器的border-radius:100%;，将图像从正方形更改为圆形。

2]它还在图像顶部显示两个隐藏元素，用于蓝色半透明叠加。它们的默认状态设置为opacity:0;，然后在:hover上使用CSS transition显示。

3]他们正在使用CSS3过渡和trandsforms来提供流畅的动画，而不是仅仅捕捉到:hover状态的CSS样式。

图像容器：悬停CSS：

.blog.blog_layout5 .span3 .post_grid_image a:hover > img, .blogging.post_grid .column.span3:hover .data-image > img, .blogging.post_grid .span3.four_column:hover .data-image > img {
    border-radius: 100%;
    transform: scale(1.08, 1.08);
}

半透明蓝圈叠加：悬停CSS：

.blogging.post_grid .span3 .preview_info_wrap, .blog.blog_layout5 .preview_info_wrap {
    border-radius: 100%;
    transform: scale(1.08, 1.08);
    transition: opacity 0.2s ease 0s;
}

图标容器叠加（蓝色叠加层顶部的图标）：悬停CSS：

.blogging.post_grid .span3 .preview_info_wrap, .blog.blog_layout5 .preview_info_wrap {
    border-radius: 100%;
    transform: scale(1.08, 1.08);
    transition: opacity 0.2s ease 0s;
}

鼠标在wordpress上的图像上单击响应

1 个答案: