Skip to content

Instantly share code, notes, and snippets.

@bazooka07
Last active June 15, 2018 12:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bazooka07/50923b4c5cf76a810cceb27f434082d6 to your computer and use it in GitHub Desktop.
Save bazooka07/50923b4c5cf76a810cceb27f434082d6 to your computer and use it in GitHub Desktop.
Flouter une page au survol d'une image
<!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