273 lines
6.9 KiB
HTML
273 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Image hover effects DEMO</title>
|
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300'><link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>CSS Image Hover Effects</h1>
|
|
<p>← <a href="https://www.nxworld.net/tips/css-image-hover-effects.html" target="_blank">View the article</a></p>
|
|
|
|
<h2>No Effect</h2>
|
|
<div class="column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo01">1. Zoom In #1</h2>
|
|
<div class="hover01 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo02">2. Zoom In #2</h2>
|
|
<div class="hover02 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo03">3. Zoom Out #1</h2>
|
|
<div class="hover03 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo04">4. Zoom Out #2</h2>
|
|
<div class="hover04 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo05">5. Slide</h2>
|
|
<div class="hover05 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>
|
|
<div class="hover06 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo07">7. Blur</h2>
|
|
<div class="hover07 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo08">8. Gray Scale</h2>
|
|
<div class="hover08 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo09">9. Sepia</h2>
|
|
<div class="hover09 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo10">10. Blur + Gray Scale</h2>
|
|
<div class="hover10 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo11">11. Opacity #1</h2>
|
|
<div class="hover11 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo12">12. Opacity #2</h2>
|
|
<div class="hover12 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo13">13. Flashing</h2>
|
|
<div class="hover13 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo14">14. Shine</h2>
|
|
<div class="hover14 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="demo15">15. Circle</h2>
|
|
<div class="hover15 column">
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
<div>
|
|
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
|
<span>Hover</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|