Question

我希望你能帮助我。我正在开发我的新投资组合网站，需要对工作展示部分中的悬停效果提供一些帮助。我不是很好的开发人员，请原谅我，如果我的代码sux x），我主要是设计。而你，我使用Bootstrap 3.0作为我的框架。

//这是HTML代码//

<div class="portfolio" id="portfolio"> <!-- portfolio begin -->

/unimportant stuff...../

<div class="container my-creations"> 
<div class="row">
        <div class="col-md-3">
            <a href="#">
                <div class="circle">
                <img src="img/gmedia.png" alt="" id="gmedia" width="115" height="115">
                </div>
            </a>
            </div>

            <div class="col-md-3">
                <a href="#">
                    <div class="circle">
                        <img src="img/ginc.png" alt="" id="ginc" width="136" height="114">
                    </div>
                </a>
            </div>

            <div class="col-md-3">
                <a href="#">
                    <div class="circle">
                        <img src="img/fgeeks.png" alt="" id="fgeeks" width="107" height="115">
                    </div>
                </a>
            </div>

            <div class="col-md-3">
                <a href="#">
                    <div class="circle">
                        <img src="img/weboxit.png" alt="" id="wbx" width="115" height="115">
                    </div>
                </a>
            </div>
     </div> <!-- end of row -->
</div>  <!-- end of my-creations -->
</div> <!-- end of portfolio -->

//以下是CSS //

.portfolio {height: 100%;}

.my-creations {margin-top: 60px;}

.circle {
width: 270px;
height: 270px;
line-height: 270px;
border-radius: 1000000px;
background-color: #262d30;
border: 8px solid #2c3235;
text-align: center;
background-image: url('img/gmedia.png') no-repeat;}

.circle img {
vertical-align: middle;
display: inline-block;  
margin-bottom: 15px;
filter: url(filters.svg#grayscale); /* Firefox */
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Webkit */ }

#ginc {margin-bottom: 30px;}

.circle img:hover {
filter: none;
-webkit-filter: grayscale(0);}

以下是我的问题：

当我的img更改过滤器悬停.circle时有没有办法？
如何在img上应用淡入淡出？因此它慢慢地从黑白变为彩色图像。 ----回答，谢谢bboysupaman和JoshC！

我希望你能帮助我，如果你需要更多信息，请问。

Answer 1

您可以使用CSS过渡！

将以下内容添加到您的CSS中。 =）

.circle img
{
    transition: all 2s;
    -webkit-transition: all 2s;
}
.circle:hover img {
    opacity:.5;
}

Answer 2

另一方面，您可以使用Jquery制作动画。我很确定Twitter-bootstrap也会出现Jquery代码。

但是，如果您担心性能问题，可以坚持使用css3。

HTML代码：

<div class="circle1">

   <img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"
width="80px" height="80px" /> 

</div>

Jquery代码：

$(document).ready(function () {

   $(".circle1").mouseenter(

   function () {
       $(".circle1").fadeOut();

    });

   $(".circle1").mouseleave(

   function () {
       $(".circle1").fadeIn();

    });


});

这是jsfiddle的一个例子。 http://jsfiddle.net/7MV6Q/

徘徊和褪色

2 个答案: