- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我想在 <img>
上使用带有 CSS 过渡的圆形悬停效果标记而不调用图像作为背景图像。
我创建了一个 JSFiddle我想要的效果。但是在这个 fiddle 中,图像被用作背景图像。我想要相同的效果,但图像在 img
中标签,而不是背景图片。
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ch-img-1 {
background-image: url(http://tympanus.net/Tutorials/CircleHoverEffects/images/5.jpg);
}
.ch-img-2 {
background-image: url(http://tympanus.net/Tutorials/CircleHoverEffects/images/5.jpg);
}
.ch-img-3 {
background-image: url(http://tympanus.net/Tutorials/CircleHoverEffects/images/5.jpg);
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 110px rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
@import url('normalize.css');
/* General Demo Style */
body {
font-family: Cambria, Georgia, serif;
background: #f9f9f9 url(../images/bg.jpg);
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main {
width: 90%;
margin: 0 auto;
position: relative;
}
.container > header {
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-align: center;
}
.container > header h1 {
font-size: 32px;
line-height: 32px;
margin: 0;
position: relative;
font-weight: 300;
color: #777;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
.container > header h2 {
font-size: 14px;
font-weight: 300;
font-style: italic;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.1);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255, 255, 255, 0.3);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos {
text-align: center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a {
display: inline-block;
font-style: italic;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 20px;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* IE10+ */
background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
/* IE6-9 */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover {
color: #333;
background: #fff;
}
.codrops-demos a:active {
background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
background: #f0f0f0;
border-color: #d9d9d9;
color: #aaa;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#f6f6f6', GradientType=0);
/* IE6-9 */
}
.support-note span {
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions {
display: block;
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
<section class="main">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Brainiac</h3>
<p>by Daniel Nyari <a href="http://drbl.in/eODP">View on Dribbble</a>
</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>Vision</h3>
<p>by Daniel Nyari <a href="http://drbl.in/eNXW">View on Dribbble</a>
</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Cylon</h3>
<p>by Daniel Nyari <a href="http://drbl.in/eNXY">View on Dribbble</a>
</p>
</div>
</div>
</li>
</ul>
</section>
最佳答案
我在这里编辑了你的 fiddle :http://jsfiddle.net/pedwf80h/7/
基本上,我已将 img url 从背景移动到 li 元素内。然后绝对定位 img 并使用 z-index 将其移动到后面。 li 元素然后使用 overflow: hidden
和 border-radius: 100%
来隐藏 li 元素之外的任何图像。
希望这对您有所帮助!
关于html - 如何使用带有 img 标签的 CSS Transitions 获得圆形悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37411097/
我正在为我的雇主编写脚本,以从他们自己的站点获取某些数据。出于一长串原因,我需要从网站上获取数据,如图所示。我发现,其中一些数据是通过 js 调用检索的... 回想起来,我应该选择 Mechanize
我正在使用 python 和 cryptography.io 来签署和验证消息。我可以通过以下方式获得签名的 DER 编码字节表示: cryptography_priv_key.sign(messag
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
是否可以区分 ECDF?以下面得到的为例。 set.seed(1) a <- sort(rnorm(100)) b <- ecdf(a) plot(b) 我想对 b 求导以获得它的概率密度函数 (PD
我找到了如何从 navigator.mimeTypes 获取 mimetypes: function GetMimeTypes() { var message = ""; var mi
我在表单中使用单选按钮来隐藏/显示联系人表单中的成员 ID 字段。问题是,当 javascript 更改 html 中包含的隐藏 id 字段(该字段设置为“无”值)时,该字段将不再通过 post 可用
我正在做单元测试。我必须测试所有可能的if..else情况。但是在此if语句中: int32_t i32Res = snprintf(buffer, len, "The%d_String_%d", 0
我有一个 Facebook 应用程序,我想从中获取“喜欢”的总数。我想知道这是否可能。 其中 ID 是应用程序的 ID,ACCESS_TOKEN 是我尝试过的应用程序的当前访问 token : gra
如果我有多个计算实例尝试同时获取同一个 blob 的租约,则似乎经常会成功。我的印象是,一旦租约发出(并因此被客户获得),就不可能同时发出另一个租约? 我希望情况确实如此,我一直在 Azure 中使用
这是我的索引 POST /blogs/1 { "name" : "learn java", "popularity" : 100 } POST /blogs/2 { "name" : "l
我正在将 Symfony2 与 FOSUserBundle 一起使用。我需要为用户获得最高角色。 role_hierarchy: ROLE_CONTRIBUTOR: ROLE_USER
我正在向服务器发送基于 REST 的请求。我希望尽快得到答复,并希望了解可以进行的各种优化。 一种方法当然是在线程中并行发送这些请求。还有哪些其他选项可用于优化此功能? 在服务器上,可以添加哪些配置?
这可能是某种重复的问题,但我似乎找不到合适的解决方案。我正在使用 git4idea.history.GitHistoryUtils.history() 获取提交列表。如果 checkout 其中一个较
我正在做一个程序,可以输入每周的工资和那一周的总工作时间。它应该以小时工资率显示答案。但是我无法显示正确的“centavos/2 decimal places”公式并且它不想使用 float % fl
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我已经尝试了 mContext.getMainLooper() 和 Looper.getMainLooper()。两者都返回相同的结果,但我想知道哪种方法正确? 我还从 Android 开发人员链接中
我有一个“affiliates”表,其中包含“user”和“referredBy”列。 给定一个用户,我希望获得该用户推荐的所有“n 级”玩家。对于 n=1,我们只关心您直接推荐的玩家数量: SELE
我在 PostgreSQL 9.5 数据库中有两个表: project - id - name task - id - project_id - name - updated_
请帮助我怎样才能得到我预期的结果,在此先感谢并抱歉我的英语不好。 PHP: $dog = implode(',', $data['dogbreed']); $query .= "AND `do
我有 let impulse = CGVectorMake(CGFloat(Constants.impulse), 0) 如何在不创建另一个 CGVector 的情况下得到它的负值? 我正在考虑在 C
我是一名优秀的程序员,十分优秀!