사진에 마우스를 올리면 신기하게 사진이 커지는 방법, 블로그 팁!

모바일 검색으로 블로그를 찾는 분이 가장 많아지면서 기존 블로그 스킨에서 반응형 블로그로 스킨을 바꿨다. 반응형 블로그 스킨을 수정하고 배우면서 놀라운 블로그를 발견하게 되고 새로운 팁들을 공부하게 되었다. 인터넷 환경이 점차 변화하면서 블로그 스킨도 그에 대응하게 되는 스킨이 바로 반응형 블로그 및 홈페이지인 것 같다.

블로그 스킨을 공부하면서 알게 된 사실을 정리하면, 첫째, 페이지가 빨리 열려야한다. 둘째, 단순하고 공간적인 여백의 미를 살려야한다. 셋째, 정확한 카테고리를 지정한다 넷째, 불필요한 스크립트는 피한다. 다섯째, 애드센스 광고와 색상 및 위치를 고려한다등 여러 가지를 신중하게 받아들이게 되었다. 무엇보다 방문자가 눈에 확 들어고 편하게 블로그를 찾아오게 끔하는 것이 중요하다.

블로그 및 홈페이지를 구현하다보면 다양한 기능들에 대한 유혹이 많이 있다. 그 중 자신에게 꼭 필요한 기능을 추가하는 것이 좋으며 오늘 소개할 블로그 팁은 사진을 자연스럽게 크게 하는 것이다. 사진 이미지에 마우스를 올리면 사진이 커지는  방법은 아주 간단하며 http://music666.tistory.com 블로그 운영자 VJ Her0님에게 얻은 소스이다. VJ Her0 블로그는 음악 블로그인데 환상적인 스킨과 기능이 설치되어 있다. 티스토리 스킨에 공부하고 싶은 분은 방문해보면 좋을 것이다.

☞ 사진 위에 마우스를 올리면 사진이 커지게 하는 방법.

 -  티스토리 관리자 화면 → 꾸미기 → HTML/CSS  편집 → style.css 여기에 아래 코드를 삽입하면 끝...!

img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 6s ease-in;
-moz-transition: all 6s ease-in;
-o-transition: all 6s ease-in;
-ms-transition: all 6s ease-in;
transition: all 6s ease-in;
}

VJ Her0님 블로그는 티스토리 멀티미디어 블로그로 최고의 스킨을 구현하고 있으며 배경 화면도 동영상으로 할 수 있는 멋진 모습도 볼 수 있다. 배경을 이미지가 아닌 동영상으로 보는 순간 응용하고 싶었지만 참고 있는 중이다. VJ Her0님은 프로그램언에도 수준급 내공을 갖고 있어 가끔 필요한 소스를 문의하면 친절하게 답변해주어 티스토리 스킨 제작자 중 숨은 고수라 생각이 들었다.

[관련글]

▶ 반응형 티스토리 블로그 스킨 변경 후기

▶ top,다음뷰,구독 버튼을 해상도에 관계 없이 블로그 좌우에 고정 설치하기

▶ 블로그 '지식'은 공유할 수 있으나 '경험'은 어렵다.

<▶ 블로그 방문자수 늘리는 방법, 이미지 파일 이름 저장 할 때 꼭!