반응형 웹을 구축하면서 고객의 니즈에 맞춰 추가되는 CSS를 공부하며 성장하고 있는 디자인해답니다.
이미지를 클릭을 유도하기 위해 이미지위에 마우스 오버시 색상이 변하고 짧은 문구까지 나온다면 더욱 클릭이 유도될 수 있습니다. 오늘 추천해드리는 방법은 아주 간단한 CSS 방법으로 백그라운드에 이미지를 넣고 그 위에 오버레이되는 방식으로 글씨를 띄워주는 방식입니다.
소스는 아래와 같이 간단히 진행합니다.
| <style> .product-img {width:300px; height: 240px; background:url('이미지 경로 및 주소를 넣으세요') no-repeat;} .product-txt {width:270px; height:210px; padding:30px; text-align: center;} .product-txt p {padding-top:43%;} .product-img:hover .product-txt {color:#FFF; opacity: 0.6;} </style> |
컬러값은 동일한 숫자나 영문일때 3개만 작성해도 적용됩니다.
진짜 간단하고 쉽죠, 아래의 페이지의 적용하는 태그를 작성하면 끝입니다!
| <div class="product-img"> <div class="product-txt"> <p>마우스 오버시 변환</p> </div> </div> |
< 완성된 예시입니다 >
'소소한 팁 > CSS,Html' 카테고리의 다른 글
| [CSS] 메인배경 삼각형으로 이미지 마스크하는 css 처리방법 (0) | 2021.01.22 |
|---|---|
| 반응형(모바일)웹에서 움직이는 가로스크롤 현상 없애기 (2) | 2021.01.20 |