마우스오버 시 백그라운드 색상 변환

 

 

 

 

요즘 디자인을 중요시 생각하다보니 이미지 위주의 사이트가 많이 늘어나고 있습니다.

 

이미지 위주의 사이트를 제작하게 되면, 텍스트와 정보를 좀 더 효과적으로 전달하기 위한 도구나 방법이 필요한데요.

제가 오늘 추천해 드리려는 방법은 마우스를 오버를 했을때 위처럼 백그라운드를 어둡게 눌러주면서 텍스트를 띄어주는 방식입니다.

 

위 방법은 이미지를 강조하고 해당 내용이나 전하려는 인포를 좀 더 가독성 있게 전달할 수 있어서 자주 사용하고 있습니다.

 

소스는 아래와 같이 상당히 간단합니다.

<style>
   .pic{ width:300px; height:300px; background: url(이미지주소) no-repeat; }
   .text{ width:240px; height:240px; background:#000000; opacity:0; padding:30px;}
   .text p{ padding-top:42%; } 
   .pic:hover .text { opacity:0.6; text-align:center; color:#ffffff; }
</style>



<div class="pic"> 
   <div class="text"> 
      <p>좋은과일 고르는 방법!!</p>
   </div> 
</div>

 

 

pic background에 이미지 주소를 교체해 주시고 <p></p> 사이에 원하시는 문구를 써주시면 됩니다.

밑에는 완성된 모습 움짤입니다~