Aujourd’hui, je vais mettre à votre disposition une série de code vous permettant de créer des effets pour vos images lorsque celle-ci sont soumises au survol de la souris. Nous utiliserons des lignes fines, beaucoup d’espace blanc, une typographie propre et des effets subtils. Je ne vous cache rien, ces éléments ne sont pas de moi mais simplement rencontré au détour de mes déambulations sur la toile. Dans l’esprit de ce site, je les met donc en « mémoire » en vous en faisant profiter et simplifie l’ensemble pour que vous puissiez les utiliser à votre tour, vous retrouverez les liens sources ci-dessous.
Ces réalisations sont Full HTML5 et CSS3, aucun JavaScript n’est utilisé: vous pourrez les intégrer très facilement dans la majorité des éditeurs en ligne de sites dès lors que ceux-ci vous offre la possibilité d’insérer ce type de code.
Les techniques utilisées pour ces effets de survol impliquent des transformations 3D et certaines transitions utilisants des pseudo-éléments. Notez que ces effets ne fonctionnent que sur les navigateurs modernes (IE9+, firefox 30+, Chrome).
Crédits de cet article :
- source de l’article : Tympanus.net
- source des photos : Unsplash.com
- source des icones : Gumroad.com et Colebemis.com pour Feather Icons
Mise en place du style CSS de base
Ces effets utilise une structure HTML commune avec un style de base requis pour la mise en place initiale des éléments. Vous ne pouvez pas vous passer de ce morceau de CSS, qui sera donc à intégrer dans votre code quelque soit le type de survol choisi. Le code CSS est à intégrer entre les balises <head> de votre page en utilisant les balise <style> ou directement dans votre feuille de style CSS si vous en utilisez une.
@font-face{font-weight:normal;font-style:normal;font-family:'feathericons';src:url('../fonts/feathericons/feathericons.eot?-8is7zf');src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg')}
*, *:after, *:before {box-sizing: border-box;}
.grid{position:relative;margin:0 auto;padding:1em 0 4em;max-width:1000px;list-style:none;text-align:center}
.grid figure{position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:320px;max-width:480px;max-height:360px;width:48%;background:#3085a3;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:.8}
.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}
.grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}
.grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure h2{word-spacing:-0.15em;font-weight:300}
.grid figure h2 span{font-weight:800}
.grid figure h2,.grid figure p{margin:0}
.grid figure p{letter-spacing:1px;font-size:68.5%}
@media screen and (max-width:50em){
.grid figure{display:inline-block;float:none;margin:10px auto;width:100%}
}
Insérer les différents effets de la demo
Lily
Code HTML:
<div class="grid">
<figure class="effect-lily">
<img src="img/1.jpg" alt="img1"/>
<figcaption>
<div>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</div>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-lily img{max-width:none;width:-webkit-calc(100% + 50px);width:calc(100% + 50px);opacity:.7;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}
figure.effect-lily figcaption{text-align:left}
figure.effect-lily figcaption>div{position:absolute;bottom:0;left:0;padding:2em;width:100%;height:50%}
figure.effect-lily h2,figure.effect-lily p{-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)}
figure.effect-lily h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s}
figure.effect-lily p{color:rgba(255,255,255,0.8);opacity:0;-webkit-transition:opacity .2s,-webkit-transform .35s;transition:opacity .2s,transform .35s}
figure.effect-lily:hover img,figure.effect-lily:hover p{opacity:1}
figure.effect-lily:hover img,figure.effect-lily:hover h2,figure.effect-lily:hover p{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-lily:hover p{-webkit-transition-delay:.05s;transition-delay:.05s;-webkit-transition-duration:.35s;transition-duration:.35s}
Sadie
Code HTML:
<div class="grid">
<figure class="effect-sadie">
<img src="img/2.jpg" alt="img02"/>
<figcaption>
<h2>Holy <span>Sadie</span></h2>
<p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-sadie figcaption::before{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-linear-gradient(top,rgba(72,76,97,0) 0,rgba(72,76,97,0.8) 75%);background:linear-gradient(to bottom,rgba(72,76,97,0) 0,rgba(72,76,97,0.8) 75%);content:'';opacity:0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}
figure.effect-sadie h2{position:absolute;top:50%;left:0;width:100%;color:#484c61;-webkit-transition:-webkit-transform .35s,color .35s;transition:transform .35s,color .35s;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
figure.effect-sadie figcaption::before,figure.effect-sadie p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-sadie p{position:absolute;bottom:0;left:0;padding:2em;width:100%;opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
figure.effect-sadie:hover h2{color:#fff;-webkit-transform:translate3d(0,-50%,0) translate3d(0,-40px,0);transform:translate3d(0,-50%,0) translate3d(0,-40px,0)}
figure.effect-sadie:hover figcaption::before,figure.effect-sadie:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Honey
Code HTML:
<div class="grid">
<figure class="effect-honey">
<img src="img/4.jpg" alt="img04"/>
<figcaption>
<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-honey{background:#4a3753}
figure.effect-honey img{opacity:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-honey:hover img{opacity:.5}
figure.effect-honey figcaption::before{position:absolute;bottom:0;left:0;width:100%;height:10px;background:#fff;content:'';-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
figure.effect-honey h2{position:absolute;bottom:0;left:0;padding:1em 1.5em;width:100%;text-align:left;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}
figure.effect-honey h2 i{font-style:normal;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}
figure.effect-honey figcaption::before,figure.effect-honey h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s}
figure.effect-honey:hover figcaption::before,figure.effect-honey:hover h2,figure.effect-honey:hover h2 i{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Layla
Code HTML:
<div class="grid">
<figure class="effect-layla">
<img src="img/6.jpg" alt="img06"/>
<figcaption>
<h2>Crazy <span>Layla</span></h2>
<p>When Layla appears, she brings an eternal summer along.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-layla{background:#18a367}
figure.effect-layla img{height:390px}
figure.effect-layla figcaption{padding:3em}
figure.effect-layla figcaption::before,figure.effect-layla figcaption::after{position:absolute;content:'';opacity:0}
figure.effect-layla figcaption::before{top:50px;right:30px;bottom:50px;left:30px;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;transform-origin:0 0}
figure.effect-layla figcaption::after{top:30px;right:50px;bottom:30px;left:50px;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;transform-origin:100% 0}
figure.effect-layla h2{padding-top:26%;-webkit-transition:-webkit-transform .35s;transition:transform .35s}
figure.effect-layla p{padding:.5em 2em;text-transform:none;opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
figure.effect-layla img,figure.effect-layla h2{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}
figure.effect-layla img,figure.effect-layla figcaption::before,figure.effect-layla figcaption::after,figure.effect-layla p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-layla:hover img{opacity:.7;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-layla:hover figcaption::before,figure.effect-layla:hover figcaption::after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
figure.effect-layla:hover h2,figure.effect-layla:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-layla:hover figcaption::after,figure.effect-layla:hover h2,figure.effect-layla:hover p,figure.effect-layla:hover img{-webkit-transition-delay:.15s;transition-delay:.15s}
Zoe
Code HTML:
<div class="grid">
<figure class="effect-zoe">
<img src="img/25.jpg" alt="img25"/>
<figcaption>
<h2>Creative <span>Zoe</span></h2>
<p class="icon-links">
<a href="#"><span class="icon-heart"></span></a>
<a href="#"><span class="icon-eye"></span></a>
<a href="#"><span class="icon-paper-clip"></span></a>
</p>
<p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-zoe figcaption{top:auto;bottom:0;padding:1em;height:3.75em;background:#fff;color:#3c4a50;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-zoe h2{float:left}
figure.effect-zoe p.icon-links a{float:right;color:#3c4a50;font-size:1.4em}
figure.effect-zoe:hover p.icon-links a:hover,figure.effect-zoe:hover p.icon-links a:focus{color:#252d31}
figure.effect-zoe p.description{position:absolute;bottom:8em;padding:2em;color:#fff;text-transform:none;font-size:90%;opacity:0;-webkit-backface-visibility:hidden;-webkit-transition:opacity .35s;transition:opacity .35s;-webkit-backface-visibility:hidden}
figure.effect-zoe h2,figure.effect-zoe p.icon-links a{-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,200%,0);transform:translate3d(0,200%,0)}
figure.effect-zoe p.icon-links a span::before{display:inline-block;padding:8px 10px;font-family:'feathericons';speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-eye::before{content:'\e000'}
.icon-paper-clip::before{content:'\e001'}
.icon-heart::before{content:'\e024'}
figure.effect-zoe h2{display:inline-block}
figure.effect-zoe:hover p.description{opacity:1}
figure.effect-zoe:hover figcaption,figure.effect-zoe:hover h2,figure.effect-zoe:hover p.icon-links a{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-zoe:hover h2{-webkit-transition-delay:.05s;transition-delay:.05s}
figure.effect-zoe:hover p.icon-links a:nth-child(3){-webkit-transition-delay:.1s;transition-delay:.1s}
figure.effect-zoe:hover p.icon-links a:nth-child(2){-webkit-transition-delay:.15s;transition-delay:.15s}
figure.effect-zoe:hover p.icon-links a:first-child{-webkit-transition-delay:.2s;transition-delay:.2s}
Oscar
Code HTML:
<div class="grid">
<figure class="effect-oscar">
<img src="img/10.jpg" alt="img10"/>
<figcaption>
<h2>Warm <span>Oscar</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-oscar{background:-webkit-linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%);background:linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%)}
figure.effect-oscar img{opacity:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-oscar figcaption{padding:3em;background-color:rgba(58,52,42,0.7);-webkit-transition:background-color .35s;transition:background-color .35s}
figure.effect-oscar figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:''}
figure.effect-oscar h2{margin:20% 0 10px 0;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-oscar figcaption::before,figure.effect-oscar p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(0);transform:scale(0)}
figure.effect-oscar:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-oscar:hover figcaption::before,figure.effect-oscar:hover p{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
figure.effect-oscar:hover figcaption{background-color:rgba(58,52,42,0)}
figure.effect-oscar:hover img{opacity:.4}
Marley
Code HTML:
<div class="grid">
<figure class="effect-marley">
<img src="img/12.jpg" alt="img12"/>
<figcaption>
<h2>Sweet <span>Marley</span></h2>
<p>Marley tried to convince her but she was not interested.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-marley figcaption{text-align:right}
figure.effect-marley h2,figure.effect-marley p{position:absolute;right:30px;left:30px;padding:10px 0}
figure.effect-marley p{bottom:30px;line-height:1.5;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-marley h2{top:30px;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
figure.effect-marley:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-marley h2::after{position:absolute;top:100%;left:0;width:100%;height:4px;background:#fff;content:'';-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)}
figure.effect-marley h2::after,figure.effect-marley p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-marley:hover h2::after,figure.effect-marley:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Ruby
Code HTML:
<div class="grid">
<figure class="effect-ruby">
<img src="img/13.jpg" alt="img13"/>
<figcaption>
<h2>Glowing <span>Ruby</span></h2>
<p>Ruby did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-ruby{background-color:#17819c}
figure.effect-ruby img{opacity:.7;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(1.15);transform:scale(1.15)}
figure.effect-ruby:hover img{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}
figure.effect-ruby h2{margin-top:20%;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
figure.effect-ruby p{margin:1em 0 0;padding:3em;border:1px solid #fff;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,20px,0) scale(1.1);transform:translate3d(0,20px,0) scale(1.1)}
figure.effect-ruby:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-ruby:hover p{opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}
Roxy
Code HTML:
<div class="grid">
<figure class="effect-roxy">
<img src="img/15.jpg" alt="img15"/>
<figcaption>
<h2>Charming <span>Roxy</span></h2>
<p>Roxy was my best friend. She'd cross any border for me.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-roxy{background:-webkit-linear-gradient(45deg,#ff89e9 0,#05abe0 100%);background:linear-gradient(45deg,#ff89e9 0,#05abe0 100%)}
figure.effect-roxy img{max-width:none;width:-webkit-calc(100% + 60px);width:calc(100% + 60px);-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
figure.effect-roxy figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}
figure.effect-roxy figcaption{padding:3em;text-align:left}
figure.effect-roxy h2{padding:30% 0 10px 0}
figure.effect-roxy p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
figure.effect-roxy:hover img{opacity:.7;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-roxy:hover figcaption::before,figure.effect-roxy:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Bubba
Code HTML:
<div class="grid">
<figure class="effect-bubba">
<img src="img/16.jpg" alt="img16"/>
<figcaption>
<h2>Fresh <span>Bubba</span></h2>
<p>Bubba likes to appear out of thin air.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-bubba{background:#9e5406}
figure.effect-bubba img{opacity:.7;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-bubba:hover img{opacity:.4}
figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after{position:absolute;top:30px;right:30px;bottom:30px;left:30px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-bubba figcaption::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1)}
figure.effect-bubba figcaption::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0)}
figure.effect-bubba h2{padding-top:30%;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
figure.effect-bubba p{padding:20px 2.5em;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
figure.effect-bubba:hover figcaption::before,figure.effect-bubba:hover figcaption::after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
figure.effect-bubba:hover h2,figure.effect-bubba:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Romeo
Code HTML:
<div class="grid">
<figure class="effect-romeo">
<img src="img/18.jpg" alt="img18"/>
<figcaption>
<h2>Wild <span>Romeo</span></h2>
<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-romeo img{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(1.4,1.4,1);transform:scale3d(1.4,1.4,1)}
figure.effect-romeo:hover img{opacity:.6;-webkit-transform:scale3d(1,1,1);transform:translate3d(1,1,1)}
figure.effect-romeo figcaption::before,figure.effect-romeo figcaption::after{position:absolute;top:50%;left:50%;width:80%;height:1px;background:#fff;content:'';-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}
figure.effect-romeo:hover figcaption::before{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(45deg);transform:translate3d(-50%,-50%,0) rotate(45deg)}
figure.effect-romeo:hover figcaption::after{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(-45deg);transform:translate3d(-50%,-50%,0) rotate(-45deg)}
figure.effect-romeo h2,figure.effect-romeo p{position:absolute;top:50%;left:0;width:100%;-webkit-transition:-webkit-transform .35s;transition:transform .35s}
figure.effect-romeo h2{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-150%,0);transform:translate3d(0,-50%,0) translate3d(0,-150%,0)}
figure.effect-romeo p{padding:.25em 2em;-webkit-transform:translate3d(0,-50%,0) translate3d(0,150%,0);transform:translate3d(0,-50%,0) translate3d(0,150%,0)}
figure.effect-romeo:hover h2{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-100%,0);transform:translate3d(0,-50%,0) translate3d(0,-100%,0)}
figure.effect-romeo:hover p{-webkit-transform:translate3d(0,-50%,0) translate3d(0,100%,0);transform:translate3d(0,-50%,0) translate3d(0,100%,0)}
Dexter
Code HTML:
<div class="grid">
<figure class="effect-dexter">
<img src="img/12.jpg" alt="img12"/>
<figcaption>
<h2>Strange <span>Dexter</span></h2>
<p>Dexter had his own strange way. You could watch him training ants.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-dexter{background:-webkit-linear-gradient(top,rgba(37,141,200,1) 0,rgba(104,60,19,1) 100%);background:linear-gradient(to bottom,rgba(37,141,200,1) 0,rgba(104,60,19,1) 100%)}
figure.effect-dexter img{-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-dexter:hover img{opacity:.4}
figure.effect-dexter figcaption::after{position:absolute;right:30px;bottom:30px;left:30px;height:-webkit-calc(50% - 30px);height:calc(50% - 30px);border:7px solid #fff;content:'';-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
figure.effect-dexter:hover figcaption::after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-dexter figcaption{padding:3em;text-align:left}
figure.effect-dexter p{position:absolute;right:60px;bottom:60px;left:60px;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}
figure.effect-dexter:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Sarah
Code HTML:
<div class="grid">
<figure class="effect-sarah">
<img src="img/13.jpg" alt="img13"/>
<figcaption>
<h2>Free <span>Sarah</span></h2>
<p>Sarah likes to watch clouds. She's quite depressed.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-sarah{background:#42b078}
figure.effect-sarah img{max-width:none;width:-webkit-calc(100%+20px);width:calc(100%+20px);-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-sarah:hover img{opacity:.4;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-sarah figcaption{text-align:left}
figure.effect-sarah h2{position:relative;overflow:hidden;padding:.5em 0}
figure.effect-sarah h2::after{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#fff;content:'';-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
figure.effect-sarah:hover h2::after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-sarah p{padding:1em 0;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
figure.effect-sarah:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Chico
Code HTML:
<div class="grid">
<figure class="effect-chico">
<img src="img/15.jpg" alt="img15"/>
<figcaption>
<h2>Silly <span>Chico</span></h2>
<p>Chico's main fear was missing the morning bus.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-chico img{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(1.12);transform:scale(1.12)}
figure.effect-chico:hover img{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}
figure.effect-chico figcaption{padding:3em}
figure.effect-chico figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:'';-webkit-transform:scale(1.1);transform:scale(1.1)}
figure.effect-chico figcaption::before,figure.effect-chico p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-chico h2{padding:20% 0 20px 0}
figure.effect-chico p{margin:0 auto;max-width:200px;-webkit-transform:scale(1.5);transform:scale(1.5)}
figure.effect-chico:hover figcaption::before,figure.effect-chico:hover p{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
Milo
Code HTML:
<div class="grid">
<figure class="effect-milo">
<img src="img/11.jpg" alt="img11"/>
<figcaption>
<h2>Faithful <span>Milo</span></h2>
<p>Milo went to the woods. He took a fun ride and never came back.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-milo{background:#2e5d5a}
figure.effect-milo img{max-width:none;width:-webkit-calc(100%+60px);width:calc(100%+60px);opacity:1;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-30px,0,0) scale(1.12);transform:translate3d(-30px,0,0) scale(1.12);-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-milo:hover img{opacity:.5;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}
figure.effect-milo h2{position:absolute;right:0;bottom:0;padding:1em 1.2em}
figure.effect-milo p{padding:0 10px 0 0;width:50%;border-right:1px solid #fff;text-align:right;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}
figure.effect-milo:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Julia
Code HTML:
<div class="grid">
<figure class="effect-julia">
<img src="img/21.jpg" alt="img21"/>
<figcaption>
<h2>Passionate <span>Julia</span></h2>
<div>
<p>Julia dances in the deep dark</p>
<p>She loves the smell of the ocean</p>
<p>And dives into the morning light</p>
</div>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-julia{background:#2f3238}
figure.effect-julia img{max-width:none;height:400px;-webkit-transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,transform 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-julia figcaption{text-align:left}
figure.effect-julia h2{position:relative;padding:.5em 0}
figure.effect-julia p{display:inline-block;margin:0 0 .25em;padding:.4em 1em;background:rgba(255,255,255,0.9);color:#2f3238;text-transform:none;font-weight:500;font-size:75%;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-360px,0,0);transform:translate3d(-360px,0,0)}
figure.effect-julia p:first-child{-webkit-transition-delay:.15s;transition-delay:.15s}
figure.effect-julia p:nth-of-type(2){-webkit-transition-delay:.1s;transition-delay:.1s}
figure.effect-julia p:nth-of-type(3){-webkit-transition-delay:.05s;transition-delay:.05s}
figure.effect-julia:hover p:first-child{-webkit-transition-delay:0;transition-delay:0}
figure.effect-julia:hover p:nth-of-type(2){-webkit-transition-delay:.05s;transition-delay:.05s}
figure.effect-julia:hover p:nth-of-type(3){-webkit-transition-delay:.1s;transition-delay:.1s}
figure.effect-julia:hover img{opacity:.4;-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
figure.effect-julia:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Goliath
Code HTML:
<div class="grid">
<figure class="effect-goliath">
<img src="img/23.jpg" alt="img23"/>
<figcaption>
<h2>Thoughtful <span>Goliath</span></h2>
<p>When Goliath comes out, you should run.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-goliath{background:#df4e4e}
figure.effect-goliath img,figure.effect-goliath h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s}
figure.effect-goliath img{-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-goliath h2,figure.effect-goliath p{position:absolute;bottom:0;left:0;padding:30px}
figure.effect-goliath p{text-transform:none;font-size:90%;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
figure.effect-goliath:hover img{-webkit-transform:translate3d(0,-80px,0);transform:translate3d(0,-80px,0)}
figure.effect-goliath:hover h2{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}
figure.effect-goliath:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Hera
Code HTML:
<figure class="effect-hera">
<img src="img/17.jpg" alt="img17"/>
<figcaption>
<h2>Tender <span>Hera</span></h2>
<p>
<a href="#"><i class="fa fa-fw fa-file-pdf-o"></i></a>
<a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
<a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
<a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
</p>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-hera{background:#303fa9}
figure.effect-hera h2{font-size:158.75%}
figure.effect-hera h2,figure.effect-hera p{position:absolute;top:50%;left:50%;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:50%;transform-origin:50%}
figure.effect-hera figcaption::before{position:absolute;top:50%;left:50%;width:200px;height:200px;border:2px solid #fff;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);transform:translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);-webkit-transform-origin:50%;transform-origin:50%}
figure.effect-hera p{width:100px;text-transform:none;font-size:121%;line-height:2}
figure.effect-hera p a{color:#fff}
figure.effect-hera p a:hover,figure.effect-hera p a:focus{opacity:.6}
figure.effect-hera p a i{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-hera p a:first-child i{-webkit-transform:translate3d(-60px,-60px,0);transform:translate3d(-60px,-60px,0)}
figure.effect-hera p a:nth-child(2) i{-webkit-transform:translate3d(60px,-60px,0);transform:translate3d(60px,-60px,0)}
figure.effect-hera p a:nth-child(3) i{-webkit-transform:translate3d(-60px,60px,0);transform:translate3d(-60px,60px,0)}
figure.effect-hera p a:nth-child(4) i{-webkit-transform:translate3d(60px,60px,0);transform:translate3d(60px,60px,0)}
figure.effect-hera:hover figcaption::before{opacity:1;-webkit-transform:translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);transform:translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1)}
figure.effect-hera:hover h2{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);transform:translate3d(-50%,-50%,0) scale3d(0.8,0.8,1)}
figure.effect-hera:hover p i:empty{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}
Winston
Code HTML:
<div class="grid">
<figure class="effect-winston">
<img src="img/30.jpg" alt="img30"/>
<figcaption>
<h2>Jolly <span>Winston</span></h2>
<p>
<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
</p>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-winston{background:#162633;text-align:left}
figure.effect-winston img{-webkit-transition:opacity .45s;transition:opacity .45s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-winston figcaption::before{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/triangle.svg) no-repeat center center;background-size:100% 100%;content:'';-webkit-transition:opacity .45s,-webkit-transform .45s;transition:opacity .45s,transform .45s;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}
figure.effect-winston h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
figure.effect-winston p{position:absolute;right:0;bottom:0;padding:0 1.5em 7% 0}
figure.effect-winston a{margin:0 10px;color:#5d504f;font-size:170%}
figure.effect-winston a:hover,figure.effect-winston a:focus{color:#cc6055}
figure.effect-winston p a i{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
figure.effect-winston:hover img{opacity:.6}
figure.effect-winston:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-winston:hover figcaption::before{opacity:.7;-webkit-transform:rotate3d(0,0,1,20deg);transform:rotate3d(0,0,1,20deg)}
figure.effect-winston:hover p i{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-winston:hover p a:nth-child(3) i{-webkit-transition-delay:.05s;transition-delay:.05s}
figure.effect-winston:hover p a:nth-child(2) i{-webkit-transition-delay:.1s;transition-delay:.1s}
figure.effect-winston:hover p a:first-child i{-webkit-transition-delay:.15s;transition-delay:.15s}
Selena
Code HTML:
<div class="grid">
<figure class="effect-selena">
<img src="img/10.jpg" alt="img10"/>
<figcaption>
<h2>Happy <span>Selena</span></h2>
<p>Selena is a tiny-winged bird.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-selena{background:#fff}
figure.effect-selena img{opacity:.95;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform-origin:50% 50%;transform-origin:50% 50%}
figure.effect-selena:hover img{-webkit-transform:scale3d(0.95,0.95,1);transform:scale3d(0.95,0.95,1)}
figure.effect-selena h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
figure.effect-selena p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:perspective(1000px) rotate3d(1,0,0,90deg);transform:perspective(1000px) rotate3d(1,0,0,90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
figure.effect-selena:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-selena:hover p{opacity:1;-webkit-transform:perspective(1000px) rotate3d(1,0,0,0);transform:perspective(1000px) rotate3d(1,0,0,0)}
Terry
Code HTML:
<div class="grid">
<figure class="effect-terry">
<img src="img/16.jpg" alt="img16"/>
<figcaption>
<h2>Noisy <span>Terry</span></h2>
<p>
<a href="#"><i class="fa fa-fw fa-download"></i></a>
<a href="#"><i class="fa fa-fw fa-heart"></i></a>
<a href="#"><i class="fa fa-fw fa-share"></i></a>
<a href="#"><i class="fa fa-fw fa-tags"></i></a>
</p>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-terry{background:#34495e}
figure.effect-terry figcaption{padding:1em}
figure.effect-terry figcaption::before,figure.effect-terry figcaption::after{position:absolute;width:200%;height:200%;border-style:solid;border-color:#101010;content:'';-webkit-transition:-webkit-transform .35s;transition:transform .35s}
figure.effect-terry figcaption::before{right:0;bottom:0;border-width:0 70px 60px 0;-webkit-transform:translate3d(70px,60px,0);transform:translate3d(70px,60px,0)}
figure.effect-terry figcaption::after{top:0;left:0;border-width:15px 0 0 15px;-webkit-transform:translate3d(-15px,-15px,0);transform:translate3d(-15px,-15px,0)}
figure.effect-terry img,figure.effect-terry p a{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-terry img{opacity:.85}
figure.effect-terry h2{position:absolute;bottom:0;left:0;padding:.4em 10px;width:50%;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
@media screen and (max-width:920px){
figure.effect-terry h2{padding:.75em 10px;font-size:120%}
}
figure.effect-terry p{float:right;clear:both;text-align:left;text-transform:none;font-size:111%}
figure.effect-terry p a{display:block;margin-bottom:1em;color:#fff;opacity:0;-webkit-transform:translate3d(90px,0,0);transform:translate3d(90px,0,0)}
figure.effect-terry p a:hover,figure.effect-terry p a:focus{color:#f3cf3f}
figure.effect-terry:hover figcaption::before,figure.effect-terry:hover figcaption::after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-terry:hover img{opacity:.6}
figure.effect-terry:hover h2,figure.effect-terry:hover p a{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-terry:hover p a{opacity:1}
figure.effect-terry:hover p a:first-child{-webkit-transition-delay:.025s;transition-delay:.025s}
figure.effect-terry:hover p a:nth-child(2){-webkit-transition-delay:.05s;transition-delay:.05s}
figure.effect-terry:hover p a:nth-child(3){-webkit-transition-delay:.075s;transition-delay:.075s}
figure.effect-terry:hover p a:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}
Phoebe
Code HTML:
<div class="grid">
<figure class="effect-phoebe">
<img src="img/3.jpg" alt="img03"/>
<figcaption>
<h2>Plain <span>Phoebe</span></h2>
<p>
<a href="#"><i class="fa fa-fw fa-user"></i></a>
<a href="#"><i class="fa fa-fw fa-heart"></i></a>
<a href="#"><i class="fa fa-fw fa-cog"></i></a>
</p>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-phoebe{background:#675983}
figure.effect-phoebe img{opacity:.85;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-phoebe:hover img{opacity:.6}
figure.effect-phoebe figcaption::before{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/triangle2.svg) no-repeat center center;background-size:100% 100%;content:'';-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(5,2.5,1);transform:scale3d(5,2.5,1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}
figure.effect-phoebe:hover figcaption::before{opacity:.6;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
figure.effect-phoebe h2{margin-top:1em;-webkit-transition:transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)}
figure.effect-phoebe:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-phoebe p a{color:#fff;font-size:140%;opacity:0;position:relative;display:inline-block;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-phoebe p a:first-child{-webkit-transform:translate3d(-60px,-60px,0);transform:translate3d(-60px,-60px,0)}
figure.effect-phoebe p a:nth-child(2){-webkit-transform:translate3d(0,60px,0);transform:translate3d(0,60px,0)}
figure.effect-phoebe p a:nth-child(3){-webkit-transform:translate3d(60px,-60px,0);transform:translate3d(60px,-60px,0)}
figure.effect-phoebe:hover p a{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Apollo
Code HTML:
<div class="grid">
<figure class="effect-apollo">
<img src="img/18.jpg" alt="img18"/>
<figcaption>
<h2>Strong <span>Apollo</span></h2>
<p>Apollo's last game of pool was so strange.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-apollo{background:#3498db}
figure.effect-apollo img{opacity:.95;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(1.05,1.05,1);transform:scale3d(1.05,1.05,1)}
figure.effect-apollo figcaption::before{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.5);content:'';-webkit-transition:-webkit-transform .6s;transition:transform .6s;-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0)}
figure.effect-apollo p{position:absolute;right:0;bottom:0;margin:3em;padding:0 1em;max-width:150px;border-right:4px solid #fff;text-align:right;opacity:0;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-apollo h2{text-align:left}
figure.effect-apollo:hover img{opacity:.6;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
figure.effect-apollo:hover figcaption::before{-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)}
figure.effect-apollo:hover p{opacity:1;-webkit-transition-delay:.1s;transition-delay:.1s}
Kira
Code HTML:
<div class="grid">
<figure class="effect-kira">
<img src="img/17.jpg" alt="img17"/>
<figcaption>
<h2>Dark <span>Kira</span></h2>
<p>
<a href="#"><i class="fa fa-fw fa-home"></i></a>
<a href="#"><i class="fa fa-fw fa-download"></i></a>
<a href="#"><i class="fa fa-fw fa-heart"></i></a>
<a href="#"><i class="fa fa-fw fa-share"></i></a>
</p>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-kira{background:#fff;text-align:left}
figure.effect-kira img{-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-kira figcaption{z-index:1}
figure.effect-kira p{padding:2.25em .5em;font-weight:600;font-size:100%;line-height:1.5;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
figure.effect-kira p a{margin:0 .5em;color:#101010}
figure.effect-kira p a:hover,figure.effect-kira p a:focus{opacity:.6}
figure.effect-kira figcaption::before{position:absolute;top:0;right:2em;left:2em;z-index:-1;height:3.5em;background:#fff;content:'';-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,4em,0) scale3d(1,0.023,1);transform:translate3d(0,4em,0) scale3d(1,0.023,1);-webkit-transform-origin:50% 0;transform-origin:50% 0}
figure.effect-kira:hover img{opacity:.5}
figure.effect-kira:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-kira:hover figcaption::before{opacity:.7;-webkit-transform:translate3d(0,5em,0) scale3d(1,1,1);transform:translate3d(0,5em,0) scale3d(1,1,1)}
Steve
Code HTML:
<div class="grid">
<figure class="effect-steve">
<img src="img/29.jpg" alt="img29"/>
<figcaption>
<h2>Lonely <span>Steve</span></h2>
<p>Steve was afraid of the Boogieman.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-steve{z-index:auto;overflow:visible;background:#000}
figure.effect-steve:before,figure.effect-steve h2:before{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:#000;content:'';-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-steve:before{box-shadow:0 3px 30px rgba(0,0,0,0.8);opacity:0}
figure.effect-steve figcaption{z-index:1}
figure.effect-steve img{opacity:1;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:perspective(1000px) translate3d(0,0,0);transform:perspective(1000px) translate3d(0,0,0)}
figure.effect-steve h2,figure.effect-steve p{background:#fff;color:#2d434e}
figure.effect-steve h2{position:relative;margin-top:2em;padding:.25em}
figure.effect-steve h2:before{box-shadow:0 1px 10px rgba(0,0,0,0.5)}
figure.effect-steve p{margin-top:1em;padding:.5em;font-weight:800;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(0.9,0.9,1);transform:scale3d(0.9,0.9,1)}
figure.effect-steve:hover:before{opacity:1}
figure.effect-steve:hover img{-webkit-transform:perspective(1000px) translate3d(0,0,21px);transform:perspective(1000px) translate3d(0,0,21px)}
figure.effect-steve:hover h2:before{opacity:0}
figure.effect-steve:hover p{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
Moses
Code HTML:
<div class="grid">
<figure class="effect-moses">
<img src="img/24.jpg" alt="img24"/>
<figcaption>
<h2>Cute <span>Moses</span></h2>
<p>Moses loves to run after butterflies.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-moses{background:-webkit-linear-gradient(-45deg,#ec65b7 0,#05e0d8 100%);background:linear-gradient(-45deg,#ec65b7 0,#05e0d8 100%)}
figure.effect-moses img{opacity:.85;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-moses h2,figure.effect-moses p{padding:20px;width:50%;height:50%;border:2px solid #fff}
figure.effect-moses h2{padding:20px;width:50%;height:50%;text-align:left;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(10px,10px,0);transform:translate3d(10px,10px,0)}
figure.effect-moses p{float:right;padding:20px;text-align:right;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}
figure.effect-moses:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-moses:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-moses:hover img{opacity:.6}
Jazz
Code HTML:
<div class="grid">
<figure class="effect-jazz">
<img src="img/25.jpg" alt="img25"/>
<figcaption>
<h2>Dynamic <span>Jazz</span></h2>
<p>When Jazz starts to chase cars, the whole world stands still.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-jazz{background:-webkit-linear-gradient(-45deg,#f3cf3f 0,#f33f58 100%);background:linear-gradient(-45deg,#f3cf3f 0,#f33f58 100%)}
figure.effect-jazz img{opacity:.9}
figure.effect-jazz figcaption::after,figure.effect-jazz img,figure.effect-jazz p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-jazz figcaption::after{position:absolute;top:0;left:0;width:100%;height:100%;border-top:1px solid #fff;border-bottom:1px solid #fff;content:'';opacity:0;-webkit-transform:rotate3d(0,0,1,45deg) scale3d(1,0,1);transform:rotate3d(0,0,1,45deg) scale3d(1,0,1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}
figure.effect-jazz h2,figure.effect-jazz p{opacity:1;-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1)}
figure.effect-jazz h2{padding-top:26%;-webkit-transition:-webkit-transform .35s;transition:transform .35s}
figure.effect-jazz p{padding:.5em 2em;text-transform:none;font-size:.85em;opacity:0}
figure.effect-jazz:hover img{opacity:.7;-webkit-transform:scale3d(1.05,1.05,1);transform:scale3d(1.05,1.05,1)}
figure.effect-jazz:hover figcaption::after{opacity:1;-webkit-transform:rotate3d(0,0,1,45deg) scale3d(1,1,1);transform:rotate3d(0,0,1,45deg) scale3d(1,1,1)}
figure.effect-jazz:hover h2,figure.effect-jazz:hover p{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
Ming
Code HTML:
<div class="grid">
<figure class="effect-ming">
<img src="img/8.jpg" alt="img08"/>
<figcaption>
<h2>Funny <span>Ming</span></h2>
<p>Ming sits in the corner the whole day. She's into crochet.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-ming{background:#030c17}
figure.effect-ming img{opacity:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-ming figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:2px solid #fff;box-shadow:0 0 0 30px rgba(255,255,255,0.2);content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(1.4,1.4,1);transform:scale3d(1.4,1.4,1)}
figure.effect-ming h2{margin:20% 0 10px 0;-webkit-transition:-webkit-transform .35s;transition:transform .35s}
figure.effect-ming p{padding:1em;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(1.5);transform:scale(1.5)}
figure.effect-ming:hover h2{-webkit-transform:scale(0.9);transform:scale(0.9)}
figure.effect-ming:hover figcaption::before,figure.effect-ming:hover p{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
figure.effect-ming:hover figcaption{background-color:rgba(58,52,42,0)}
figure.effect-ming:hover img{opacity:.4}
Lexi
Code HTML:
<div class="grid">
<figure class="effect-lexi">
<img src="img/12.jpg" alt="img12"/>
<figcaption>
<h2>Altruistic <span>Lexi</span></h2>
<p>Each and every friend is special. Lexi won't hide a single cookie.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-lexi{background:-webkit-linear-gradient(-45deg,#000 0,#fff 100%);background:linear-gradient(-45deg,#000 0,#fff 100%)}
figure.effect-lexi img{margin:-10px 0 0 -10px;max-width:none;width:-webkit-calc(100%+10px);width:calc(100%+10px);opacity:.9;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(10px,10px,0);transform:translate3d(10px,10px,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
figure.effect-lexi figcaption::before,figure.effect-lexi p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-lexi figcaption::before{position:absolute;right:-100px;bottom:-100px;width:300px;height:300px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 900px rgba(255,255,255,0.2);content:'';opacity:0;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}
figure.effect-lexi:hover img{opacity:.6;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-lexi h2{text-align:left;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(5px,5px,0);transform:translate3d(5px,5px,0)}
figure.effect-lexi p{position:absolute;right:0;bottom:0;padding:0 1.5em 1.5em 0;width:140px;text-align:right;opacity:0;-webkit-transform:translate3d(20px,20px,0);transform:translate3d(20px,20px,0)}
figure.effect-lexi:hover figcaption::before{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
figure.effect-lexi:hover h2,figure.effect-lexi:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
Duke
Code HTML:
<div class="grid">
<figure class="effect-duke">
<img src="img/27.jpg" alt="img27"/>
<figcaption>
<h2>Messy <span>Duke</span></h2>
<p>Duke is very bored. When he looks at the sky, he feels to run.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
Code CSS:
figure.effect-duke{background:-webkit-linear-gradient(-45deg,#34495e 0,#cc6055 100%);background:linear-gradient(-45deg,#34495e 0,#cc6055 100%)}
figure.effect-duke img,figure.effect-duke p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure.effect-duke:hover img{opacity:.1;-webkit-transform:scale3d(2,2,1);transform:scale3d(2,2,1)}
figure.effect-duke h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}
figure.effect-duke p{position:absolute;bottom:0;left:0;margin:20px;padding:30px;border:2px solid #fff;text-transform:none;font-size:90%;opacity:0;-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1);-webkit-transform-origin:50% -100%;transform-origin:50% -100%}
figure.effect-duke:hover h2,figure.effect-duke:hover p{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
Vous disposez maintenant d’une gamme d’effets de survol qui vous permettrons de dynamiser vos présentations d’images ou de photos!
Ressources HTML/CSS | DSAA Design La Martinière le 13 mars 2016 at 16 h 36 min
[…] Des tas d’effets de survol d’image en CSS3 Le code est donné. Il reste à l’adapter à vos besoins, en plus simple éventuellement. […]
Paul le 24 mars 2016 at 11 h 04 min
Merci beaucoup pour ces très bonnes ressources, et la traduction en français des consignes de Codrops !
EpicaDesign administrateurle 24 mars 2016 - 11 h 50 min
De rien, mais il n’y a pas réellement de traduction, juste beaucoup de code
Rainart Raymond le 14 mai 2016 at 10 h 37 min
Bonjour,
Tout d’abord merci pour ces codes magnifiques. Ayant voulu utiliser Terry… Je me trouves avec :
< a href="#" rel="nofollow">< i>< /i>< /a>
< a href="#" rel="nofollow">< i>
< a href="#" rel="nofollow">< i>
< a href="#" rel="nofollow">< i>< /a>
Ou trouver la classe = »fa fa, etc ? » Ou avez vous une astuce non spécifié pour cette class ?
D’avance, merci de votre réponse.
Cordialement.
EpicaDesign administrateurle 14 mai 2016 - 14 h 04 min
Bonjour,
la class fa provient de la bibliothèque d’icones Font Awesome dont voici le lien :
http://fontawesome.io/icons/
abianeis le 22 février 2017 at 12 h 57 min
Bonjour,
Ces effets sont très intéressants (et facile à manier), mais avez-vous une solution pour que le touch sur mobile ne devienne pas un clic et zappe le survol avec le texte, je vois que sur ce site ils ont résolus ce problème ( http://www.csm-sa.ch/fr/), mais étant très novice en css, je ne trouve pas de solution, ou alors il faut passer par le js?
Merci pour ces bouts de code.
Amicalement
pierre le 26 avril 2017 at 16 h 05 min
Bonjour
J’ai trouvé ces bouts de code sympathiques, je pense en utiliser
Merci pour cette idée
gillp le 18 mai 2017 at 16 h 03 min
Probablement une question de débutant, mais avec le code css mes images sont redimensionnées en petit format et je ne trouve pas quel aspect modifié pour avoir mon image en taille réelle. Merci de votre
Mick le 20 mars 2019 at 6 h 17 min
MERCI! pour cette magnifique documentation très bien expliquée et présentée.
joe0703 le 2 mai 2019 at 11 h 54 min
Bonjour, pourriez vous si possible donner le lien des images sous forme d adresse internet ? car le soucis c est que vos lien sont des asser internet, on ne peut donc pas les récupérer ce qui est assez problématique pour l’effet winston par exemple car on n’as pas le triangle et je ne sais pas si c est juste un triangle ou au contraire l’image qui est modifié