[소소한팀3] 이미지 마우스 오버시 검은배경에 텍스트 show 효과

Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

[소소한팀3] 이미지 마우스 오버시 검은배경에 텍스트 show 효과

2 은형제아빠 4 93 2 0

안녕하세요. 은형제아빠입니다.

웹디자인으로 시작해 기획일까지 하다가 개발자가 없는 상황에서 

어쩔수 없이 개발소스까지 들여다보며 좌충우돌했던 경험을 공유해드리고자 소소한 팁 남겨봅니다.

기본설치 환경은 그누보드+아미나 5.3.3.3 버전입니다.

===================================================================


이미지 롤오버시 효과중 하나입니다. 

css만으로 처리된 효과입니다.

아래 소스를 html하나 만드셔서 붙여넣고 확인해보세요. 


<style>

    body {margin: 0}

    figure {transition: opacity 0.2s; position: relative; margin: 0; max-width: 20%}

    figure img {width: 100%}

    figure figcaption {color: #fff;bottom: 70px; opacity: 0;position: absolute; text-align: center; width: 100%;transition: all .3s ease;}

    figure .gallery-img {opacity: 1;transition: all 0.3s ease 0s;overflow: hidden}

    figure:hover .gallery-img {background-color: #000}

    figure:hover img {transform: scale(1.1, 1.1);transition: all .3s ease;opacity: 0.15;cursor: url("https://hcode.b-cdn.net/wp-content/themes/h-code/assets/images/icon-zoom-white.png"), pointer}

    figure:hover figcaption {opacity: 1;transition: all .3s ease; }

    </style>


    <figure>

        <div class="gallery-img"><img src="https://hcode.themezaa.com/wp-content/uploads/2015/09/portfolio-img16.jpg.webp" ></div>

        <figcaption>

            <h3>Tailoring Interior</h3>

            <p>Ajax popup - Style #2</p>

        </figcaption>

    </figure>



<응용>

figure의 max-width값을 20%로 설정했는데 상황에 따라 100% 등으로 처리. li태그나 div태그로 감싸서 사용하는 경우가 많기 때문에.. 

특히나 갤러리 등에서 

transform: scale의 스케일 값은 1.1 이상 하면 촌스러워 보임. 1.1 하나로 생략해서 사용해도 됨. 

opacity: 0.15의 값이 0.2이상 되면 암막 효과가 떨어짐. 켑션 글자도 덜 선명하게 보임. 0.1~0.2가 적당

cursor: url는 이미지용 커서를 사용하고 싶을 때 ... 포맷은 png로... 


3170f467f079ad64b05999758044a4fd_1605752022_4759.jpg
 

4 Comments
15 녹색 11.19 16:31  
좋은 정보 감사합니다.
11 선우샵 11.19 17:00  
감사합니다
26 dawn 11.19 17:31  
오우 감사합니다
1 로리콘 11.21 15:01  
감사합니다.
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand