我想将社交媒体图标放在照片标题旁边的图像下方。即 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/