michael/web-html5-scripts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
a9878bfa59
web-html5-scripts/css-effects/image-hover-effects/index.html

273 lines
6.9 KiB
HTML
Raw Normal View History

Update some old scripts and push newest developments
2020-03-07 13:56:01 +01:00
<!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>
Reference in New Issue Copy Permalink