Warning: Use of undefined constant uniqid - assumed 'uniqid' (this will throw an Error in a future version of PHP) in /homepages/43/d521926771/htdocs/epcwbsite/wp-content/plugins/epica-official-sc/core/shortcodes.php on line 3
CSS3 – Des effets avancés de survol d’image | epica design
Se connecter Recherche

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.

epica design

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 :

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!


Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/43/d521926771/htdocs/epcwbsite/wp-includes/class-wp-comment-query.php on line 399

Commentaires Écrire un commentaire

  • Ressources HTML/CSS | DSAA Design La Martinière le 13 mars 2016 at 16 h 36 min Répondre

    […] 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 Répondre

    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 Répondre

      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 Répondre

    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 Répondre

      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 Répondre

    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 Répondre

    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 Répondre

    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


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*