Question

无法在鼠标悬停时获得字体真棒图标的平滑淡入淡出。我究竟做错了什么？理想情况下，我想让图标淡入，并为背景图像添加一些不透明度。

CODE：

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
@import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );

.adminDemoVideo {
  position: relative;
  display: inline-block;
  transition: all .5s linear;
}
.adminDemoVideo::before {
    content: '\f04b';
    z-index: 5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
    padding: 3px 15px 3px 25px;
    color: white;
    font-family: 'FontAwesome';
    font-size: 50px !important;
    background-color: rgba(23, 35, 34, 0.75);
    border-radius: 5px 5px 5px 5px;
display:none;
transition: all .5s linear;
}


.adminDemocontainer:hover a::before {
    display:block;
    transition: all .5s linear;
}

<div class="adminDemocontainer">
<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
  <img src="http://placehold.it/1200x800/fc0" class="img-responsive">
</a>
</div>

Answer 1

我已添加相同的CSS请完整检查您的帮助

＆＃13;

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
@import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );

.adminDemoVideo {
  position: relative;
  display: inline-block;
  transition:all 0.3s ease;
  
}
.adminDemoVideo:after {
    content: '\f04b';
    z-index: 5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
    padding: 3px 15px 3px 25px;
    color: white;
    font-family: 'FontAwesome';
    font-size: 50px !important;
    background-color: rgba(23, 35, 34, 0.75);
    border-radius: 5px 5px 5px 5px;
    -webkit-transition: all 1s;
    transition: all 1s;
    opacity:0;
}


.adminDemoVideo:hover:after {
    
   opacity:1;
}

＆＃13;

<div class="adminDemocontainer">
<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
  <img src="http://placehold.it/1200x800/fc0" class="img-responsive">
</a>
</div>

＆＃13;

如何在悬停时淡入淡出CSS“：after”伪元素？

1 个答案: