티스토리 블로그 이미지에 마우스 올렸을때 어둡게 변하는 효과 적용하기

 

 

이미지에 마우스를 올렸을때

 

티스토리 블로그를 사용하면서 html로 여러가지 편집을 할 수 있다는것이 재미있기도하고 어렵기도 하였습니다. 기본제공스킨이나 다른 사용자분들이 올려주시는 스킨을 이것저것 사용해보고 나에게 맞는 스킨을 찾아가는것도 재미있죠. 오늘은 스킨의 기능중에 잘 구현되어있지않은 내 맘에 들게 변경해보는 기능중 이미지에 마우스를 올렸을때 약간 어둡게 변하는 모습을 구현하는 시간을 가져보겠습니다. 이 기능으로 이미지의 모습을 더 명확하게 표현하고 주목도 있게 바꿀 수 있어서 저는 만족중입니다.

 

📣 사이트 바로가기

 

 

어떻게 구현해야할까요?

 

이 기능을 구현하기 위해서는 간단하게 티스토리편집창중 꾸미기 → 스킨편집  →  html편집  →  CSS편집창 순서대로 이동하여 css편집창에 코드를 추가하여 기능을 구현할 수 있습니다. 아래의 코드를 복사하여 CSS편집창 가장 아래에 붙여넣기 해주세요. 

 

/* 이미지호버시 어둡게 설정 */
img:hover {
    transition: 0.3s ease-in-out;
    filter: brightness(80%);
}
/* 콤마군의 은밀한 사생활 https://commagun.tistory.com/ */

 

위의 코드를 복사하기 어려운 분들은 아래의 txt파일을 다운로드 받아서 열어보고 그안의 코드를 복사해서 사용하시면 되겠습니다.

 

이미지호버시어둡게설정하는CSS코드.txt

0.00MB

 

---

 

아래의 캡처이미지를 확인해보세요. CSS편집창 가장 아래에 복사한 코드를 그대로 붙여넣고 저장을 하시면 되겠습니다.

 

 

 

 

어떻게 보이나요?

 

이렇게 적용한 코드가 어떻게 보이게 되는지 아래의 영상을 통해서 확인해보세요. 그냥 마우스호버시에도 아무런 변화가 없는것보다는 이렇게 이미지에 반응이 있으니 더 명확해지고 특별해지는 느낌이 나는것 같습니다. 이 효과가 싫다면 위에 적용한 코드를 그대로 삭제만 해주면 되니 더 간단하죠?

 

 

 

 

추천하는 쇼핑제품

 

번거로운 조립없이 한번에 촥! 펼쳐 바로 사용하는 접이식 선반 추천

 

접이식 선반 자세히보기

 

택배를 받아서 별도로 조립을 어렵게 해야한다거나 어려운 작동방법이 있는것 아닌 펼치고 고정하면 바로 사용이 가능해 너무나 간편한 선반제품을 추천드립니다. 이 제품이 특히나 더 좋은 점은 일반적인 선반의 크기보다 조금더 넓은 선반의 넓이로 인해 약같은 아쉬웠던 공간을 더 많이 활용할 수 있게 도와준다는 점이 장점으로 다가옵니다. 이동이 편리한 바퀴까지 장착되어 물건을 그대로 둔채로 다른공간으로 이동할때도 너무나 쉽게 혼자서 해결할 수 있죠. 현재 47%할인중인 제품이니 바로 살펴보고 구매해보세요.

 

 

 

관련태그

 

티스토리블로그, 티스토리이미지효과, 티스토리, 티스토리블로그이미지효과, 이미지CSS효과, 티스토리이미지어둡게, 이미지호버효과

 

 

 

관련링크

 

이 글의 썸네일처럼 나도 쉽게 썸네일을 만들어보고싶다 생각하면 클릭

 

내 썸네일도 만들어보기

 

 

이 블로그에 쓰인 스킨 다운로드 받아서 내 블로그에 적용해보기

 

이 스킨 다운로드

 

 

 

카테고리 더보기

 

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

티스토리 블로그에 글을 복사,붙여넣기 할 때   코드 삭제해주는 사이트

티스토리 블로그에 글을 복사,붙여넣기 할 때   코드 삭제해주는 사이트

 

티스토리 블로그 애드센스 수익을 높일 수 있는 항상 따라다니는 링크버튼 넣기

티스토리 블로그 애드센스 수익을 높일 수 있는 항상 따라다니는 링크버튼 넣기

 

티스토리 블로그 : 항상 따라다니는 링크버튼의 수정과 다른 스타일보기

티스토리 블로그 : 항상 따라다니는 링크버튼의 수정과 다른 스타일보기

 

 

 

참고하세요

 

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 쿠팡, 알리익스프레스등의 파트너스 활동으로 인한 수익금을 얻는 링크가 있습니다.
· 이 블로그의 홈으로 가시려면 여기를 누르셔도 됩니다.