안녕하세요 낭만고양이 입니다. 오늘은 마우스가 이미지 위에 위치했을때 이미지에 여러가지 효과를 주는 방법에대해 알아보도록하겠습니다. ccs 를 이용한 방법입니다.
이 소스의 출처는 http://www.blueb.co.kr 입니다.
<!doctype html> <html lang="kr"> <head> <meta charset="UTF-8"> <title>http://www.blueb.co.kr</title> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 200px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 200px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { width: 200px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Zoom In #1 */ .hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); } /* Zoom In #2 */ .hover02 figure img { width: 300px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover02 figure:hover img { width: 350px; } /* Zoom Out #1 */ .hover03 figure img { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover03 figure:hover img { -webkit-transform: scale(1); transform: scale(1); } /* Zoom Out #2 */ .hover04 figure img { width: 400px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover04 figure:hover img { width: 300px; } /* Slide */ .hover05 figure img { margin-left: 30px; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover05 figure:hover img { margin-left: 0; } /* Rotate */ .hover06 figure img { -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover06 figure:hover img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } /* Blur */ .hover07 figure img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover07 figure:hover img { -webkit-filter: blur(0); filter: blur(0); } /* Gray Scale */ .hover08 figure img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover08 figure:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } /* Sepia */ .hover09 figure img { -webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover09 figure:hover img { -webkit-filter: sepia(0); filter: sepia(0); } /* Blur + Gray Scale */ .hover10 figure img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover10 figure:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); } /* Opacity #1 */ .hover11 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover11 figure:hover img { opacity: .5; } /* Opacity #2 */ .hover12 figure { background: #1abc9c; } .hover12 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover12 figure:hover img { opacity: .5; } /* Flashing */ .hover13 figure:hover img { opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s; } @-webkit-keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } @keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } /* Shine */ .hover14 figure { position: relative; } .hover14 figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .hover14 figure:hover::before { -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } /* Circle */ .hover15 figure { position: relative; } .hover15 figure::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255,255,255,.2); border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .hover15 figure:hover::before { -webkit-animation: circle .75s; animation: circle .75s; } @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } </style> </head> <body> <h2>No Effect</h2> <div class="column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo01">1. Zoom In #1</h2> <div class="hover01 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo02">2. Zoom In #2</h2> <div class="hover02 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo03">3. Zoom Out #1</h2> <div class="hover03 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo04">4. Zoom Out #2</h2> <div class="hover04 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo05">5. Slide</h2> <div class="hover05 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2> <div class="hover06 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo07">7. Blur</h2> <div class="hover07 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo08">8. Gray Scale</h2> <div class="hover08 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo09">9. Sepia</h2> <div class="hover09 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo10">10. Blur + Gray Scale</h2> <div class="hover10 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo11">11. Opacity #1</h2> <div class="hover11 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo12">12. Opacity #2</h2> <div class="hover12 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure style="background-color:#9b59b6;"> <img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure style="background-color:#3498db;"> <img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo13">13. Flashing</h2> <div class="hover13 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo14">14. Shine</h2> <div class="hover14 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> <h2 id="demo15">15. Circle</h2> <div class="hover15 column"> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="http://www.blueb.co.kr/SRC2/_image/s_03.jpg" /></figure> <span>Hover</span> </div> </div> </body> </html> | cs |
위와 같은 소스를 적용시킨 결과물은 아래와 같습니다.
댓글