[CSS] 이미지에 마우스 오버시 색상변환

이미지에 마우스를 가져가면,

이미지의 색상이 어둡게 변하는 태그 입니다.

 

 

    

 

아래는 style 부분 입니다.

 

.pic1{ width:338px; height:284px; background: url(이미지이름.jpg) no-repeat; } .text{ width:338px; height:285px; background:#000000; opacity:0; } .pic1:hover .text { opacity:0.6; text-align:justify; color:#ffffff; font-size:20px; font-weight:700; font-family:"맑은 고딕"; padding:30px; }

 

위와 같이 pic1 과 text 라는 이름으로 속성을 정해줍니다. 배경그림 색상은 #000, 텍스트는 #fff  입니다.

 

그리고 본문의 원하는 위치에 div 를 넣어 줍니다.

 

<div class="pic1"> <div class="text"> 드라이아이스란 무엇이며, 어떻게 만들어 지는지 소개 합니다. </div> </div>

 

만약, 이미지에 링크를 주고 싶다면, div 의 처음과 끝에 <a href="#">와 </a>를 넣어주면 되겠네요.