튀어 나와 페이딩

나를 도울 수 있기를 바랍니다. 저는 새 포트폴리오 웹 사이트에서 일하고 있으며 작업 쇼케이스 섹션에서 호버 효과에 대한 약간의 도움이 필요합니다. 나는 좋은 개발자가 아니므로 내 코드 sux x) 실례지만, 대부분 디자인. 그리고, 저는 프레임 워크로 Bootstrap 3.0을 사용했습니다.튀어 나와 페이딩

: // 여기

는 //

<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);}

그리고 내 질문에있는 HTML 코드입니다

마우스를 가져 가면 방해 할 수있는 방법이 있습니까? 내 img가 필터를 변경합니까?
img에 어떻게 페이드 호버를 적용 할 수 있습니까? 흑백에서 화려한 이미지로 천천히 이동합니다. - 답변 됨, bboysupaman과 JoshC 감사합니다!

더 많은 정보가 필요하면 문의하십시오.

출처

2014-01-27 Matojak

이 질문의 애니메이션 부분에 관한 것입니다 : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations – user1950929

나는 애니메이션을 사용하는 것이 좋습니다 않을 것이다, 내가 좋겠 전환을 고수하십시오. 목표 달성을위한 더 나은 방법입니다. =) – bboysupaman

CSS 전환을 사용할 수 있습니다!

다음을 CSS에 추가하십시오. =)

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

출처

2014-01-27 20:54:18 bboysupaman

'2s'부분을 원하는만큼 증가시킬 수 있습니다. – bboysupaman

양쪽 모두에서 전환을 수행하는 것이 좋지만, 단지 'img'요소 자체에서만 가져야 만합니다. 초기 전환과 다른 경우가 아니면': hover'에 전환을 추가 할 필요가 없다고 생각합니다 . 1+ 여기, 예를 들어 http://jsfiddle.net/D7a6r/ 호버 (hover)로 전환하거나 마우스를 가져 가면 전환됩니다. –

올바른 JoshC! 감사! 미친 전환에 익숙해 진 습관이지만,이 상황에서는 적용되지 않습니다. 잘 했어! – bboysupaman

반면에 Jquery를 사용하여 애니메이션을 만들 수 있습니다. 트위터 - 부트 스트랩이 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/

출처

2014-01-27 23:09:49 Minelava

튀어 나와 페이딩

답변

관련 문제