作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将社交媒体图标放在照片标题旁边的图像下方。即 Facebook、Twitter、Soundcloud 和 Instagram。我希望当图像悬停在图像上时社交媒体图标随图像旋转。
HTML
<div class="polaroid-images">
<a href="" title="Alex" ><img height="200" src="Alexandra.jpg" alt="Island" title="Alex" class=fishes /></a>
<i class="fa fa-facebook fa-3x"></i>
</div>
CSS
.polaroid-images a
{
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}
.polaroid-images a, :after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a, i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index:10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
box-shadow: 0 10px 20px rgba(0,0,0,.7);
}
.polaroid-images i {
z-index: 11;
padding 30px 25px 15px;
margin-right: 10px 22px 30px ;
position: absolute;
top: 25%;
left: 25%;
transform: translate(1%, 1%);
overflow: hidden;
}
最佳答案
只需将悬停时的相同过渡添加到 i.像这样:
.polaroid-images:hover i {
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
}
关于javascript - 如何在图像上放置很棒的字体并模仿悬停属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43242795/
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我正在开发一个 rdp 虚拟 channel 应用程序。我已经在注册表中注册了客户端 dll 并试图理解,客户端 dll 已加载。但是当从 pEntryPoints 调用 pVirtualChanne
是否可以通过 GPRS(USB 棒)绑定(bind)(聚合)多个连接并将其用作 Linux 中的一个链接? 最佳答案 技术上是可行的。 Linux 有一个名为 bonding 的模块它可以将多个接口(
我的主容器 div 可以刷新,所以它的内容被隐藏/显示。当我的容器 div 隐藏时,我的页脚会弹出。 html 结构如下所示: 注意我已经试过了: 而且它似乎不起作用,当隐藏容器 div 时,页脚 d
我有一个问题,我可以使用 wpa_suppli 进行无线连接 cant on some network, but i need to connect on a network where the SS
我是一名优秀的程序员,十分优秀!