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，你将实现你想要的。

Answer 2

使用jQuery更容易完成：

$(function() {
    $('#img_one').hover(function() { 
    $('#abt_one').slideDown(350); 
}, function() { 
    $('#abt_one').fadeOut(3); 
    });
});

您可以通过在括号内放置一个数字来指定slideDown()和fadeOut()的速度。数字代表毫秒。

这是一个小提琴... http://jsfiddle.net/4z2zq/350/

您甚至可以添加更多效果，以使过渡更顺畅：

$(function() {
    $('#img_one').hover(function() { 
    $('#abt_one').slideDown(350)
    .css('opacity', 0)
    .animate({ opacity: 1 },
    { queue: false, duration: 'slow' });
}, function() { 
    $('#abt_one').fadeOut(3); 
    });
});

这是第二个小提琴...... http://jsfiddle.net/4z2zq/351/

使用jQuery将允许您从CSS文件中删除大量代码。

Answer 3

对于使用CSS的动画，我建议使用animate.css。

使用非常简单，只需将此代码段添加到HT

即可

<script>
   $('.CLASSNAME').addClass('animated fadeIn');
</script>

Answer 4

如果您必须使用CSS，以下内容将有效...... http://jsfiddle.net/9rCQv/98/

我更改了您的html，以便h2位于img_one div中，这也是悬停影响h2的必要条件。换句话说，我将h2作为img_one的子元素：

<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>

然后我将CSS更改为以下内容：

#abt_one {
    visibility: hidden;
    text-transform: uppercase;
    padding-top: 0px;
    padding-right: 110px;
    padding-left: 90px;
    padding-bottom: 110px;
    font-size: 35px;
    position: absolute;
    opacity 1s;   
    opacity: 0;
}

#img_one:hover #abt_one {
    visibility:visible;
    text-transform: uppercase;
    padding-top: 150px;
    padding-right: 110px;
    padding-left: 90px;
    padding-bottom: 110px;
    transition: all 0.75s ease-in;
    font-size: 35px;
    position: absolute; 
    opacity:1;
}

我在CSS中更改的主要内容是visibility和opacity属性。我通过将opacity与transition相结合，使其顺利过渡到视野中。

CSS：淡出图片并淡入文本

4 个答案: