Study Html CSS picture hover results. Designed by Naoya a codepen consumer.

HTML
<h1>CSS Picture Hover Results</h1> <p>← <a href="https://www.nxworld.web/css-image-hover-effects.html" goal="_blank">View the article</a></p> <h2>No Impact</h2> <div class="column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo01">1. Zoom In #1</h2> <div class="hover01 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo02">2. Zoom In #2</h2> <div class="hover02 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo03">3. Zoom Out #1</h2> <div class="hover03 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo04">4. Zoom Out #2</h2> <div class="hover04 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo05">5. Slide</h2> <div class="hover05 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2> <div class="hover06 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo07">7. Blur</h2> <div class="hover07 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo08">8. Grey Scale</h2> <div class="hover08 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo09">9. Sepia</h2> <div class="hover09 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo10">10. Blur + Grey Scale</h2> <div class="hover10 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo11">11. Opacity #1</h2> <div class="hover11 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo12">12. Opacity #2</h2> <div class="hover12 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo13">13. Flashing</h2> <div class="hover13 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo14">14. Shine</h2> <div class="hover14 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div> <h2 id="demo15">15. Circle</h2> <div class="hover15 column"> <div> <determine><img src="https://picsum.pictures/300/200?picture=244" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=1024" /></determine> <span>Hover</span> </div> <div> <determine><img src="https://picsum.pictures/300/200?picture=611" /></determine> <span>Hover</span> </div> </div>
CSS
physique { shade: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { shade: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; shade: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content material: ''; clear: each; show: block; } .column div { place: relative; float: left; width: 300px; top: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { place: absolute; backside: -20px; left: 0; z-index: -1; show: block; width: 300px; margin: 0; padding: 0; shade: #444; font-size: 18px; text-decoration: none; text-align: middle; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } determine { width: 300px; top: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } determine:hover+span { backside: -36px; opacity: 1; } /* Zoom In #1 */ .hover01 determine img { -webkit-transform: scale(1); remodel: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover01 determine:hover img { -webkit-transform: scale(1.3); remodel: scale(1.3); } /* Zoom In #2 */ .hover02 determine img { width: 300px; top: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover02 determine:hover img { width: 350px; } /* Zoom Out #1 */ .hover03 determine img { -webkit-transform: scale(1.5); remodel: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover03 determine:hover img { -webkit-transform: scale(1); remodel: scale(1); } /* Zoom Out #2 */ .hover04 determine img { width: 400px; top: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover04 determine:hover img { width: 300px; } /* Slide */ .hover05 determine img { margin-left: 30px; -webkit-transform: scale(1.5); remodel: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover05 determine:hover img { margin-left: 0; } /* Rotate */ .hover06 determine img { -webkit-transform: rotate(15deg) scale(1.4); remodel: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover06 determine:hover img { -webkit-transform: rotate(0) scale(1); remodel: rotate(0) scale(1); } /* Blur */ .hover07 determine img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover07 determine:hover img { -webkit-filter: blur(0); filter: blur(0); } /* Grey Scale */ .hover08 determine img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover08 determine:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } /* Sepia */ .hover09 determine img { -webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover09 determine:hover img { -webkit-filter: sepia(0); filter: sepia(0); } /* Blur + Grey Scale */ .hover10 determine img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover10 determine:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); } /* Opacity #1 */ .hover11 determine img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover11 determine:hover img { opacity: .5; } /* Opacity #2 */ .hover12 determine { background: #1abc9c; } .hover12 determine img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover12 determine:hover img { opacity: .5; } /* Flashing */ .hover13 determine: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 determine { place: relative; } .hover14 determine::earlier than { place: absolute; high: 0; left: -75%; z-index: 2; show: block; content material: ''; width: 50%; top: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to proper, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); remodel: skewX(-25deg); } .hover14 determine:hover::earlier than { -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } /* Circle */ .hover15 determine { place: relative; } .hover15 determine::earlier than { place: absolute; high: 50%; left: 50%; z-index: 2; show: block; content material: ''; width: 0; top: 0; background: rgba(255,255,255,.2); border-radius: 100%; -webkit-transform: translate(-50%, -50%); remodel: translate(-50%, -50%); opacity: 0; } .hover15 determine:hover::earlier than { -webkit-animation: circle .75s; animation: circle .75s; } @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; top: 200%; opacity: 0; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; top: 200%; opacity: 0; } }