[마우스 hover 이용한 효과 #2. 스타일시트 작성]

- 스타일 시트 작성 - 

.box{
    max-width: 2000px;    //  전체적인 큰틀 의 이름 .
    width:100%;
    margin:0 auto;
}

ul{font-size: 0;}				// ul 안의 비어있는 간격을 없앰
ul>li{
    display: inline-block;		// 
    vertical-align: top;	//인라인 블럭의 요소를 세로정렬 
    width:33%;				// 사진의 느낌을 주기 위해 33.3%
}

ul>li>a {					
    display: block;				
    width: auto;		// 사이즈가 유동적으로 변하게 
    text-decoration: none;		// 링크 형태의 텍스트에 밑줄값을 없애줌 
    margin: 10px ;         /* 사진 사이의 띄어놓는 값들 */
    
}

ul>li> a .screen {
    position: relative;			
    overflow: hidden;	// 스크린 클래스의 밖으로 나갈때 보이지 않음 
}

ul > li > a .screen .top{
    position: absolute;  // 레이어 형태의 값인 
    bottom:150%;		// 아래서 부터 150% 지점 
    left: 30px;			// 왼쪽으로 부터 30px 지점 
    z-index:2;			// 레이어 속성의 우선순위 2 
    color:#fff;
    font-size: 26px;
    font-weight: 900;
    transition:all .35s;
}


ul > li > a .screen .bottom{
    position: absolute;
    top:150%;
    left:30px;
    z-index: 2;
    color: #fff;
    font-size: 12px;
    transition:all .35s;
}

ul > li > a .screen img {
    height: 100%;
}
ul > li > a h3{
    font-size: 20px;
    text-align: center;
    padding: 20px;
    color: black;
}

ul > li > a:hover .top {bottom:52%;} // 아래서부터 52% 지점 이동 
ul > li > a:hover .bottom {top:52%;} //a클래스 마우스 올리면 bottom클래스는 위에서부터

 

 

 

- 출력 결과 -

(나타나는 모습을.. 찍고 싶은데 스샷도 마우스로 해야하는거라 안되서.. 일단 급히 사진찍은 걸로 올린다.

이부분은 나중에.. 어떻게  하면 블로그에 보여질수 있을지 찾아봐야겠다..)