html - CSS:淡出图片和淡入文本

Question

我想在我的网页底部制作圆形按钮以链接到网站的不同部分。这些按钮有图像，当它们悬停在上面时，我想让图像淡出并出现一段文字。我在这方面遇到了相当大的困难，并且没有在网上找到任何东西。

我有几个接近的解决方案，但没有一个能像我希望的那样有效。我曾尝试将文本嵌套在带有图像的 div 中，但随后文本逐渐淡化为与按钮相同的不透明度。我有另一个解决方案，我让文本和图像正确淡出/淡入，但触发淡入淡出的边界很远(即当鼠标远离按钮时图像会淡出。

下面是我当前尝试的代码。我在这里的策略是通过将鼠标悬停在图像上来触发图像和文本淡入淡出，以便触发淡入淡出的边界是正确的。问题是，如果我将文本嵌套在图像中，图像就会淡出，如果我不嵌套它，我什至无法触发悬停。以下是我当前的代码。

HTML:

<div class="col-md-4">
 <div class="circular_one">
  <h2 class="abt_one" id="abt_one">About</h2>
   <div class="img_one" id="img_one"></div>
 </div> 
</div>  

CSS:

.img_one {  
    margin-left: auto;
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url('IMG_2612.jpg') no-repeat;
    background-size: cover;
    box-shadow: 0 0 8px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .4);

}

.img_one:hover {    
    margin-left: auto;
    width: 300px;
    height: 300px;
    opacity: 0.5;
    transition: all 0.75s ease-in-out;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background-image: url('IMG_2612.jpg') no-repeat;
    background-color: #483D8B;
    background-size: cover;
    box-shadow: 0 0 8px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .4);

}

#abt_one {
    text-transform: uppercase;
    padding-top: 0px;
    padding-right: 110px;
    padding-left: 90px;
    padding-bottom: 110px;
    font-size: 35px;
    position: absolute;

}

#img_one:hover + #abt_one {
    text-transform: uppercase;
    padding-top: 110px;
    padding-right: 110px;
    padding-left: 90px;
    padding-bottom: 110px;
    transition: all 0.75s ease-in-out;
    font-size: 5px;
    position: absolute;

}

Answer 1

JSBIN

你应该使用这个结构:

  <div class="col-md-4">
    <div class="circular_one">
     <div class="img_one" id="img_one"> 
       <h2 class="abt_one" id="abt_one">About</h2>     
       </div>
    </div>  
  </div>  

如您所见，#abt_one 是 #img_one 的子项。并更改 css，您将实现您想要的。