친효애드온 : 본문 이미지 링크 걸었을 때 마우스 올리면 글씨 보이게 하기

스마트폰으로 인터넷 정보를 스크랩하는데 스크랩된 이미지 아래 부분에 웹사이트라는 문장이 표시가 되는것을 목격했습니다. 분명 캡쳐할때는 이런 글씨가 없었는데 싶었고 다시 한 번 해당 웹문서를 캡처 시도하며 체크했는데 역시 없습니다. 안드로이드에 추가된 기능인지는 모르겠으나 현재 사용중인 갤럭시노트20 울트라는 웹문서 캡쳐 시 URL 정보가 이미지에 남습니다. 그래서 캡쳐된 이미지를 갤러리에서 확인 시 북마크처럼 편리하게 해당 웹페이지를 방문하는 기능이 있습니다. 여기에서 힌트를 얻었습니다. 티스토리 본문에도 링크를 걸어서 마우스 오버 시 "바로가기" 표시가 되도록 만들고 싶었습니다. 왠지 가능해 보였습니다. <a>태그만 제어하면 될 것 같았습니다. 바로 시도해보았고 마침내 구현에 성공했습니다.

위의 이미지에 마우스를 올려보시기 바랍니다. 전체 이미지가 어두워지면서 아래쪽에 바로가기라는 글씨가 생성됨을 알 수 있습니다. 참고로 친효스킨을 기준으로 설계되었으며 타스킨에서도 작동은 되지만 100% 알맞게 동작하지 않을 수 있음을 말씀드립니다. 만약 타스킨에서 사용하고 싶은데 정상적으로 안 되는 것 같다면 댓글로 문제의 URL 주소를 남겨주시기 바랍니다.

HTML 및 Script 세팅

세팅할게 없습니다.

CSS 세팅

아래의 첨부파일을 다운로드 받아서 사용중인 스킨의 CSS에 붙여넣기 합니다. 관리자 > 꾸미기 > 스킨편집 > CSS 탭으로 들어가시어 빈 공간을 확보 후 복사 및 붙여넣기 하시면 됩니다. 위치는 상관 없습니다.

친효애드온 - 본문 이미지 링크 CSS.txt

0.00MB

위의 텍스트에는 다음의 CSS 스타일코드가 들어있습니다.

/* 친효애드온 : 본문 이미지 링크 */
figure.imageblock > a {
    display: inline-block;
    position: relative;
    bottom: -5px; /* 친효스킨에서만 필요한 옵션 */
    font-size: 0;
    letter-spacing: 0;
    word-spacing: 0;
}

/* 어두운 백그라운드 영역 */
figure.imageblock > a::before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: calc(100% - 15px); /* 어두워지는 백그라운드 세로 사이즈 조절 */
    background-color: #000;
    transition: all 0.2s; /* 애니메이션 재생 시간 조절 */
    opacity: 0;
    z-index: 1;
}

/* 텍스트 영역 */
figure.imageblock > a::after {
    display: inline-block;
    position: absolute;
    bottom: 30px; /* 바로가기 글씨의 바닥으로부터 떨어진 간격 조절 */
    left: 50%;
    content: "바로가기";
    padding: 0 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    font-size: 13px; /* 폰트 크기 조절 */
    color: #fff;
    transform: translateX(-50%);
    transition: all 0.2s; /* 애니메이션 재생 시간 조절 */
    opacity: 0;
    z-index: 2;
}

/* 마우스 호버 시 밝기 */
figure.imageblock > a:hover::before,
figure.imageblock > a:hover::after {
    opacity: 0.7; /* 밝기 조절 */
}

각 옵션에 대해서 주석으로 설명을 넣었습니다. 참고하시어 조절하시면 됩니다. 특히 「어두워지는 백그라운드 세로 사이즈 조절」 부분은 스킨에 따라 영역이 다를 수 있습니다. 다시 한 번 말씀드리지만 이 설정값은 친효스킨 2.4 버전을 기준으로 완성된 결과입니다.