Last active
June 15, 2018 12:18
-
-
Save bazooka07/50923b4c5cf76a810cceb27f434082d6 to your computer and use it in GitHub Desktop.
Flouter une page au survol d'une image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="fr"> | |
<head> | |
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<title>Flouter une page au survol d'une image</title> | |
<style> | |
.container { | |
display: flex; | |
justify-content: space-between; | |
flex-wrap: nowrap; | |
padding: 0.5rem; | |
background: #aaa; | |
} | |
.item { | |
position: relative; | |
width: 280px; | |
text-align: center; | |
} | |
.item::before { | |
position: absolute; | |
content: 'Bazooka07'; | |
transform: translate(-50%, 80%) rotate(-45deg); | |
z-index: 10; | |
color: #888; | |
top: 50%; | |
font-size: 200%; | |
font-weight: bold; | |
} | |
.item:nth-of-type(2n)::before { | |
transform: translate(-50%, 80%) rotate(45deg); | |
} | |
.item a { | |
text-decoration: none; | |
} | |
.item > a:first-of-type { | |
position: absolute; | |
top: 0.3rem; | |
width: 100%; | |
display: block; | |
z-index: 10; | |
} | |
.item > a:first-of-type img { | |
transition: transform 0.5s ease; | |
} | |
.item > a:first-of-type img:hover { | |
transform: scale(1.4) translateY(20%); | |
} | |
.item > div { | |
display: flex; | |
flex-direction: column; | |
padding: 120px 0.3rem 0.3rem; | |
height: calc(100% - 120px - 0.3rem); | |
background: wheat; | |
border: 1px solid #444; | |
border-radius: 0.5rem; | |
} | |
.item > div h3 { | |
margin: 0; | |
padding: 0.3rem 0; | |
} | |
.item > div p { | |
margin: 0; | |
padding: 0.3rem; | |
border: 3px inset gold; | |
background: #efe4c8; | |
flex-grow: 1; | |
border-radius: 0.5rem; | |
} | |
.item > div > a:last-of-type { | |
display: block; | |
text-align: right; | |
padding: 0 0.8rem 0 0; | |
} | |
.item > div > a:last-of-type::after { | |
content: '>>'; | |
} | |
/* C'est flou */ | |
.container.flou .item > div, | |
.container.flou .item > a:first-of-type img:not(:hover) { | |
filter: blur(3px); | |
} | |
</style> | |
</head><body> | |
<div id="container" class="container"> | |
<div class="item"> | |
<a href="http://www.tlcprod.com"><img src="http://www.tlcprod.info/images/sport2.jpg"></a> | |
<div> | |
<h3><a href="http://www.tlcprod.com">Sports & Évènementiel</a></h3> | |
<p>Communication audiovisuelle pour votre évenement, produit, marque dans le domaine de l'outdoor et du sport.</p> | |
<a href="http://www.tlcprod.com" class="suite">En savoir plus</a> | |
</div> | |
</div> | |
<div class="item"> | |
<a href="http://www.tlccorpo.com"><img src="http://www.tlcprod.info/images/corpo7.jpg"></a> | |
<div> | |
<h3><a href="http://www.tlccorpo.com">Entreprises</a></h3> | |
<p>Communication audiovisuelle pour votre entreprise (PME, artisan, BTP, distribution, groupes) : film corporate, salons, formations, produits....</p> | |
<a href="http://www.tlccorpo.com" class="suite">En savoir plus</a> | |
</div> | |
</div> | |
<div class="item"> | |
<a href="http://www.tlcprod.com"><img src="http://www.tlcprod.info/images/aerien3.jpg"></a> | |
<div> | |
<h3><a href="/products/cinestarHL.php">Tourisme & Institutions</a></h3> | |
<p>Communication pour la mise en valeur de votre territoire, patrimoine, atout toursitiques et vos institutions.</p> | |
<a href="http://www.tlcprod.com" class="suite">En savoir plus</a> | |
</div> | |
</div> | |
<div class="item"> | |
<a href="http://www.tlcprodaerial.com"><img src="http://www.tlcprod.info/images/aerien1.jpg"></a> | |
<div> | |
<h3><a href="http://www.tlcproaerial.com">Prises de vue aérienne</a></h3> | |
<p>Prise de vue aérienne (photos et vidéos), par drone et hélicoptère : mise en valeur de votre événement, patrimoine, territoire. Inspection de chantier, surveillance, études...</p> | |
<a href="http://www.tlcprod.com" class="suite">En savoir plus</a> | |
</div> | |
</div> | |
<div class="item"> | |
<a href="http://www.tlcprodweb.com"><img src="http://www.tlcprod.info/images/site3.jpg"></a> | |
<div> | |
<h3><a href="http://www.tlcprodweb.com">Sites Web</a></h3> | |
<p>Boutique en ligne, e-commerce, site vitrine, location.... Un site web est indispensable pour votre entreprise, evenement, vendre vos produits....</p> | |
<a href="http://www.tlcprod.com" class="suite">En savoir plus</a> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
(function() { | |
'use strict'; | |
const container = document.body.querySelector('.container'); | |
const imgs = document.body.querySelectorAll('.item > a:first-of-type img'); | |
if(container != null && imgs != null) { | |
for(var i=0, iMax=imgs.length; i<iMax; i++) { | |
imgs[i].addEventListener('mouseenter', function(event) { | |
container.classList.add('flou'); | |
event.preventDefault(); | |
}); | |
imgs[i].addEventListener('mouseleave', function(event) { | |
container.classList.remove('flou'); | |
event.preventDefault(); | |
}); | |
} | |
} | |
})(); | |
</script> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment