Transition

<a href="#n">
    <img src="../images/over2.jpg" />
    <span class="over_bg"></span>
    <span class="over_txt">마우스 오버하면<br />나타나는 텍스트</span>
</a>

a{
    position: relative;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    display: block;
}
a .over_bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 1s;
    background: rgba(54,119,251,0.9);
}
a .over_txt{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    opacity :0;
    transition: 1s;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}
a:hover .over_bg{opacity: 1;}
a:hover .over_txt{
    top: 40%;
    opacity: 1;
}

1. 1번 마우스 오버하면 나타날 효과를 설계한다.
   이미지만 보이다가 이미지에 마우스를 올리면 색이 덮어지고 글자가 나타난다.
   이미지를 덮을 색상 over_bg와 나타날 텍스트 ober_txt를 코딩한다.
2. 2번 마우스를 오버한 상태로 css를 코딩한다.
   

   a{
       position: relative;
       font-size: 0;
       line-height: 0;
       text-decoration: none;
       display: block;
   }
   a .over_bg{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background: rgba(54,119,251,0.9);
   }
   a .over_txt{
       position: absolute;
       left: 0;
       top: 40%;
       width: 100%;
       text-align: center;
       color: #fff;
       font-size: 15px;
       line-height: 1.5;
   }
   

   
   a를 기준으로 해서(position:relative) 이미지의 위에 over_bg, over_txt가 올라가기 때문에 모두 position:absolute;로 배치해야함.
   a의 높이는 img의 높이로 결정되기 때문에 img태그에 행간이 적용되어 img하단에 여백이 발생한다. 그렇기 때문에 line-height:0;font-size:0;을 img를 감싸고 있는 a태그에 줘야 여백이 사라짐.
   반대로 이때문에 over_txt에는 글자크기와 행간을 줘야함.
3. 3번 마우스를 오버하면 나타나는 요소에 transtion:1s;opacity:0;을 추가한다.
   transtion:1s;는 효과를 1초동안 실행다는 값으로 변경가능 함.
   opacity:0;은 자연스럽게 나타나는 효과를 주기 위해서 투명하게 처리한 값. 절대 display:none;을 주면 안됨.
4. 4번 마우스를 오버했을 경우 변경되는 값을 코딩한다.
   

   a:hover .over_bg,
   a:hover .over_txt{opacity: 1;}
   

   
   주의사항 a:hover .over_bg 일때 변경사항을 코딩하면 반드시 a .over_bg에 transition을 미리 선언했어야함.
   

   a .over_bg{
       opacity: 0;
       transtion: 1s;
   }
   a .over_txt{
       opacity: 0;
       transtion: 1s;
   }
   a:hover .over_bg,
   a:hover .over_txt{opacity: 1;}
   

5. 5번 모바일은 터치로 동작하므로 마우스 오버 없음!!!
   만약 이 효과를 pc버전에서만 적용되게 하려면
   

   @media screen and (min-width:641px){
       a:hover .over_bg,
       a:hover .over_txt{opacity:1;}
   }
   

   
   이렇게 선언하면 마우스 오버효과는 641px이상에서만 적용된다.

1. 1번 움직일 요소가 각 움직임마다 따로 따로 선택할 수 있어야 한다.
   예를 들어 A가 나온 후 B가 나타난다면 A와 B를 따로 CSS에서 선택할 수 있어야 한다.
2. 2번 jquery에서 scrollTop값을 출력해서 A가 보이기 시작할 값을 알아낸다.
   

   $(document).ready(function(){
       var scrolling = $(window).scrollTop();
   
       $(window).scroll(function(){
           scrolling = $(window).scrollTop();
           console.log(scrolling);
       });
   });
   

   
   브라우저의 console창에서 출력되는 scrollTop값을 보면서 윈도우를 스크롤하여 A요소가 나타나는 효과가 나타났으면 하는 값을 결정한다. 현재 페이지의 A요소는 900px, B요소는 1300px, C요소는 1600px에 나타나는 효과를 줄 예정이다.
3. 3번 jquery에서 scrollTop값이 설정한 값에 도달하면 각 요소에 클래스를 추가해주도록 한다.
   

   $(document).ready(function(){
       var scrolling = $(window).scrollTop();
       scroll_check();
   
       $(window).scroll(function(){
           scrolling = $(window).scrollTop();
           console.log(scrolling);
           scroll_check();
       });
   
       function scroll_check(){
           if(scrolling > 900){
               $("A요소의 선택자").addClass("on");
           }
           if(scrolling > 1300){
               $("B요소의 선택자").addClass("on");
           }
           if(scrolling > 1600){
               $("B요소의 선택자").addClass("on");
           }
       };
   });
   

   
   
4. 4번 해당 요소가 어떻게 나타나는 효과를 줄것인지 설계한다.
   해당 예제에서는 요소가 보이지 않다가 위에서 아래로 내려오면서 나타나는 효과로 할 것이다.
5. 5번 css에 해당요소의 기본 스타일과 on 클래스가 추가되었을때의 스타일을 선언한다.
   

   .A요소선택자{
       opacity: 0;
       transform: translate(0, -50px);
       transition: 1s;
   }
   .B요소선택자{
       opacity: 0;
       transform: translate(0, -50px);
       transition: 1s;
   }
   .C요소선택자{
       opacity: 0;
       transform: translate(0, -50px);
       transition: 1s;
   }
   

   
   모든 요소는 처음에 보이지 않는 상태이고(opacity: 0;),
   위로 이동하여 있으며(transform: translate(0, 50px);),
   효과를 1초동안 실행한다(transition: 1s;)
   

   .A요소선택자.on{opacity:1; transform:translate(0, 0); }
   .B요소선택자.on{opacity:1; transform:translate(0, 0); }
   .C요소선택자.on{opacity:1; transform:translate(0, 0); }
   

   
   해당요소에 on이라는 클래스를 jquery에서 추가해주면 나타나는 효과가 나타남.
   jquery가 작동되면 html이 <div class="A on"> 이렇게 되기 때문에 선택자는 .A요소선택자.on 여백없이 붙여써야 A라는 클래스와 on이라는 클래스가 동시에 선언되면 해당 css가 적용된다.
6. ★Tip! 만약 스크롤이 올라갔다가 다시 내려올때 같은 애니메이션이 실행되게 하고 싶다면 scroll_check함수에 아래를 추가한다.
   

       function scroll_check(){
           if(scrolling > 900){
               $("A요소의 선택자").addClass("on");
           }
           if(scrolling > 1300){
               $("B요소의 선택자").addClass("on");
           }
           if(scrolling > 1600){
               $("B요소의 선택자").addClass("on");
           }
           
           if(scrolling < 10){
               $("A요소의 선택자").removeClass("on");
               $("B요소의 선택자").removeClass("on");
               $("B요소의 선택자").removeClass("on");
           }
           
       };