<div class="figure effect-1"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 1 <span>Lily</span></h2> <p>Lily likes to play with crayons and pencils</p> </div> </div> </div> <!-- EFFECT 2 --> <div class="figure effect-2"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 2 <span>Sadie</span></h2> <p>Sadie likes to play with crayons and pencils</p> </div> </div> </div> <!-- EFFECT 3 --> <div class="figure effect-3"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 3 <span>Roxy</span></h2> <p>Roxy never took.</p> </div> </div> </div> <!-- EFFECT 4--> <div class="figure effect-4"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 4 <span>Bubba</span></h2> <p>Bubba likes to appear out</p> </div> </div> </div> <!-- EFFECT 5--> <div class="figure effect-5"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 5 <span>Romeo</span></h2> <p>Romeo never knows what he wants.</p> </div> </div> </div> <!-- EFFECT 6--> <div class="figure effect-6"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 6 <span>Layla</span></h2> <p>Layla never knows what he wants.</p> </div> </div> </div> <!-- EFFECT 7--> <div class="figure effect-7"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 7 <span>Oscar</span></h2> </div> </div> </div> <!-- EFFECT 8--> <div class="figure effect-8"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 8 <span>Oscar</span></h2> <p>Oscar is a decent man. He used to clean porches with pleasure.</p> </div> </div> </div> <!-- EFFECT 9--> <div class="figure effect-9"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 9 <span>Marley</span></h2> <p>Marley tried to convince her but she was not interested.</p> </div> </div> </div> <!-- EFFECT 10--> <div class="figure effect-10"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 10 <span>Ruby</span></h2> <p>Ruby did not need any help. Everybody knew that.</p> </div> </div> </div> <!-- EFFECT 11--> <div class="figure effect-11"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 11 <span>Milo</span></h2> <p>Milo went to the woods. He took a fun ride and never came back.</p> </div> </div> </div> <!-- EFFECT 12--> <div class="figure effect-12"> <img src="http://lorempixel.com/400/200/animals/6" alt="img12" /> <div class="figcaption"> <div> <h2>Effect 12 <span>Dexter</span></h2> <p>dexter went to the woods. He took a fun ride and never came back.</p> </div> </div> </div> <!-- <h2>Zoe</h2> <div class="grid"> <figure class="effect-zoe"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-zoe"> <img src="http://lorempixel.com/400/300/" alt="img26"/> <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> <h2>Dexter</h2> <div class="grid"> <figure class="effect-dexter"> <img src="http://lorempixel.com/400/300/" alt="img19"/> <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> <figure class="effect-dexter"> <img src="http://lorempixel.com/400/300/" 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> <h2>Sarah</h2> <div class="grid"> <figure class="effect-sarah"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-sarah"> <img src="http://lorempixel.com/400/300/" alt="img20"/> <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> <h2>Chico</h2> <div class="grid"> <figure class="effect-chico"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-chico"> <img src="http://lorempixel.com/400/300/" alt="img04"/> <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> <h2>Milo</h2> <div class="grid"> <figure class="effect-milo"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-milo"> <img src="http://lorempixel.com/400/300/" alt="img03"/> <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> </div> <div class="grid"> <figure class="effect-julia"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-julia"> <img src="http://lorempixel.com/400/300/" alt="img22"/> <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> <h2>Goliath</h2> <div class="grid"> <figure class="effect-goliath"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-goliath"> <img src="http://lorempixel.com/400/300/" alt="img24"/> <figcaption> <h2>Thoughtful <span>Goliath</span></h2> <p>When Goliath comes out, you should run.</p> <a href="#">View more</a> </figcaption> </figure> </div> <h2>Hera</h2> <div class="grid"> <figure class="effect-hera"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-hera"> <img src="http://lorempixel.com/400/300/" alt="img25"/> <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> <h2>Winston</h2> <div class="grid"> <figure class="effect-winston"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-winston"> <img src="http://lorempixel.com/400/300/" alt="img01"/> <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> <h2>Selena</h2> <div class="grid"> <figure class="effect-selena"> <img src="http://lorempixel.com/400/300/" alt="img10"/> <figcaption> <h2>Happy <span>Selena</span></h2> <p>Selena is a tiny-winged bird.</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect-selena"> <img src="http://lorempixel.com/400/300/" alt="img31"/> <figcaption> <h2>Happy <span>Selena</span></h2> <p>Selena is a tiny-winged bird.</p> <a href="#">View more</a> </figcaption> </figure> </div> <h2>Terry</h2> <div class="grid"> <figure class="effect-terry"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-terry"> <img src="http://lorempixel.com/400/300/" alt="img26"/> <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> <h2>Phoebe</h2> <div class="grid"> <figure class="effect-phoebe"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-phoebe"> <img src="http://lorempixel.com/400/300/" alt="img07"/> <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> <h2>Apollo</h2> <div class="grid"> <figure class="effect-apollo"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-apollo"> <img src="http://lorempixel.com/400/300/" alt="img22"/> <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> <h2>Kira</h2> <div class="grid"> <figure class="effect-kira"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-kira"> <img src="http://lorempixel.com/400/300/" alt="img05"/> <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> <h2>Steve</h2> <div class="grid"> <figure class="effect-steve"> <img src="http://lorempixel.com/400/300/" alt="img29"/> <figcaption> <h2>Lonely <span>Steve</span></h2> <p>Steve was afraid of the Boogieman.</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect-steve"> <img src="http://lorempixel.com/400/300/" alt="img33"/> <figcaption> <h2>Lonely <span>Steve</span></h2> <p>Steve was afraid of the Boogieman.</p> <a href="#">View more</a> </figcaption> </figure> </div> <h2>Moses</h2> <div class="grid"> <figure class="effect-moses"> <img src="http://lorempixel.com/400/300/" alt="img24"/> <figcaption> <h2>Cute <span>Moses</span></h2> <p>Moses loves to run after butterflies.</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect-moses"> <img src="http://lorempixel.com/400/300/" alt="img20"/> <figcaption> <h2>Cute <span>Moses</span></h2> <p>Moses loves to run after butterflies.</p> <a href="#">View more</a> </figcaption> </figure> </div> <h2>Jazz</h2> <div class="grid"> <figure class="effect-jazz"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-jazz"> <img src="http://lorempixel.com/400/300/" alt="img06"/> <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> <h2>Ming</h2> <div class="grid"> <figure class="effect-ming"> <img src="http://lorempixel.com/400/300/" alt="img09"/> <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> <figure class="effect-ming"> <img src="http://lorempixel.com/400/300/" 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> <h2>Lexi</h2> <div class="grid"> <figure class="effect-lexi"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-lexi"> <img src="http://lorempixel.com/400/300/" alt="img03"/> <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> <h2>Duke</h2> <div class="grid"> <figure class="effect-duke"> <img src="http://lorempixel.com/400/300/" 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> <figure class="effect-duke"> <img src="http://lorempixel.com/400/300/" alt="img17"/> <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> </div> -->
body{ background:#333; }/* Common style */ .figure { position: relative; float: left; overflow: hidden; margin: 18px 18px; width: 420px; height: 220px; width: 33%; background: #3085a3; text-align: center; cursor: pointer; /* border:2px grey solid; */ } .figure img { position: relative; display: block; opacity: 0.8; /* border:2px green solid; */ width:100%; height:100%; } .figure .figcaption { /* padding:20px; */ color:#fff; /* border:2px red solid; */ text-transform: uppercase; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .figure .figcaption::before, .figure .figcaption::after { pointer-events: none; } .figure .figcaption, .figure .figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height:100%; /* border:1px solid blue; */ } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .figure .figcaption > a { z-index: 1000; text-indent: 10%; white-space: nowrap; font-size: 0; opacity: 0; } .figure h2 { /* word-spacing: -0.15em; */ font-weight: 300; /* border:1px solid blue; */ } .figure h2 span { font-weight: 800; } .figure h2, .grid .figure p { margin: 0; } .figure p { letter-spacing: 1px; font-size: 68.5%; } /* Individual effects */ /*---------------*/ /* ============================= 1 ============================= */ /*---------------*/ .figure.effect-1 img { max-width: none; width: -webkit-calc(100% + 50px); width: calc(100% + 50px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); } .figure.effect-1 .figcaption { text-align: left; } .figure.effect-1 .figcaption > div { position: absolute; bottom: 0; left: 0; /* height: 50%; */ padding: 20px; width: 204px; } .figure.effect-1 h2, .figure.effect-1 p { -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } .figure.effect-1 h2 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .figure.effect-1 p { color: rgba(255, 255, 255, 0.8); opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; } .figure.effect-1:hover img, .figure.effect-1:hover p { opacity: 1; } .figure.effect-1:hover img, .figure.effect-1:hover h2, .figure.effect-1:hover p { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-1:hover p { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; } /*---------------*/ /* ============================= 2 ============================= */ /*---------------*/ .figure.effect-2 .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-2 h2 { position: absolute; top: 50%; left: 0; width: 100%; color: #484c61; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .figure.effect-2 .figcaption::before, .figure.effect-2 p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .figure.effect-2 .figcaption div { padding: 20px; width: 204px; } .figure.effect-2 p { width:100%; position: absolute; bottom: 0; left: 0; opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } .figure.effect-2: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-2:hover .figcaption::before, .figure.effect-2:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*---------------*/ /* ============================= 3 ============================= */ /*---------------*/ .figure.effect-3 { background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%); background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%); } .figure.effect-3 img { max-width: none; width: -webkit-calc(100% + 60px); width: calc(100% + 60px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } .figure.effect-3 .figcaption::before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 1px solid #fff; content:''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .figure.effect-3 .figcaption { text-align: left; } .figure.effect-3 .figcaption div { padding: 35px; } .figure.effect-3 h2 { /* padding: 10% 0 10px 0; */ } .figure.effect-3 p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .figure.effect-3:hover img { opacity: 0.7; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-3:hover .figcaption::before, .figure.effect-3:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*---------------*/ /***** Effect 4 *****/ /*---------------*/ .figure.effect-4 { background: #9e5406; } .figure.effect-4 img { opacity: 0.7; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .figure.effect-4:hover img { opacity: 0.4; } .figure.effect-4 .figcaption::before, .figure.effect-4 .figcaption::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content:''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .figure.effect-4 .figcaption::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(0, 1); } .figure.effect-4 .figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); } .figure.effect-4 h2 { padding-top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } .figure.effect-4 p { /* padding: 20px 2.5em; */ opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } .figure.effect-4:hover .figcaption::before, .figure.effect-4:hover .figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .figure.effect-4:hover h2, .figure.effect-4:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*---------------*/ /***** 5 *****/ /*---------------*/ .figure.effect-5 { -webkit-perspective: 1000px; perspective: 1000px; } .figure.effect-5 img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, 0, 300px); transform: translate3d(0, 0, 300px); } .figure.effect-5:hover img { opacity: 0.6; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-5 .figcaption div{ width:100%; height:100%; } .figure.effect-5 .figcaption::before, .figure.effect-5 .figcaption::after { position: absolute; top: 50%; left: 50%; width: 80%; height: 1px; background: #fff; content:''; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .figure.effect-5:hover .figcaption::before { opacity: 0.5; -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); } .figure.effect-5:hover .figcaption::after { opacity: 0.5; -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); } .figure.effect-5 h2, .figure.effect-5 p { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .figure.effect-5 h2 { width:100%; top: 60%; -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0); transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0); } .figure.effect-5 p { width:100%; bottom: 20%; -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0); transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0); } .figure.effect-5:hover h2 { padding-top:20px; -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0); transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0); } .figure.effect-5:hover p { -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0); transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0); } /*---------------*/ /***** 6 *****/ /*---------------*/ .figure.effect-6 { background: #18a367; } .figure.effect-6 img { height: 390px; } .figure.effect-6 .figcaption { /* padding: 3em; */ } .figure.effect-6 .figcaption::before, .figure.effect-6 .figcaption::after { position: absolute; content:''; opacity: 0;/* temp */ } .figure.effect-6 .figcaption::before { top: 30px; right: 20px; bottom: 30px; left: 20px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(1, 1);/* temp (0, 1)*/ -webkit-transform-origin: 0 0; transform-origin: 0 0; } .figure.effect-6 .figcaption::after { top: 20px; right: 40px; bottom: 20px; left: 40px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .figure.effect-6 h2 { padding-top:35px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .figure.effect-6 p { padding: 0; text-transform: none; opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } .figure.effect-6 img, .figure.effect-6 h2 { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } .figure.effect-6 img, .figure.effect-6 .figcaption::before, .figure.effect-6 .figcaption::after, .figure.effect-6 p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .figure.effect-6:hover img { opacity: 0.7; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-6:hover .figcaption::before, .figure.effect-6:hover .figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .figure.effect-6:hover h2, .figure.effect-6:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-6:hover .figcaption::after, .figure.effect-6:hover h2, .figure.effect-6:hover p, .figure.effect-6:hover img { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } /*---------------*/ /***** 7 *****/ /*---------------*/ .figure.effect-7 { background: #4a3753; } .figure.effect-7 img { opacity: 0.9; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .figure.effect-7:hover img { opacity: 0.5; } .figure.effect-7 .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-7 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-7 h2 i { font-style: normal; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } .figure.effect-7 .figcaption::before, .figure.effect-7 h2 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .figure.effect-7:hover .figcaption::before, .figure.effect-7:hover h2, .figure.effect-7:hover h2 i { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*---------------*/ /***** Oscar *****/ /*---------------*/ .figure.effect-8 { background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%); background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%); } .figure.effect-8 img { opacity: 0.9; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .figure.effect-8 .figcaption { width: auto; height: auto; padding: 3em; background-color: rgba(58, 52, 42, 0.7); -webkit-transition: background-color 0.35s; transition: background-color 0.35s; } .figure.effect-8 .figcaption::before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 1px solid #fff; content:''; } .figure.effect-8 h2 { margin: 20% 0 10px 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .figure.effect-8 .figcaption::before, .figure.effect-8 p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(0); transform: scale(0); } .figure.effect-8:hover h2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-8:hover .figcaption::before, .figure.effect-8:hover p { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .figure.effect-8:hover .figcaption { background-color: rgba(58, 52, 42, 0); } .figure.effect-8:hover img { opacity: 0.4; } /*---------------*/ /***** 9 *****/ /*---------------*/ .figure.effect-9 .figcaption { text-align: right; } .figure.effect-9 h2, .figure.effect-9 p { position: absolute; right: 30px; left: 30px; padding: 10px 0; } .figure.effect-9 p { bottom: 30px; line-height: 1.5; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .figure.effect-9 h2 { top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } .figure.effect-9:hover h2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-9 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-9 h2::after, .figure.effect-9 p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .figure.effect-9:hover h2::after, .figure.effect-9:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*---------------*/ /***** 10 *****/ /*---------------*/ .figure.effect-10 { background-color: #17819c; } .figure.effect-10 img { opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.15); transform: scale(1.15); } .figure.effect-10:hover img { opacity: 0.5; -webkit-transform: scale(1); transform: scale(1); } .figure.effect-10 h2 { margin-top: 20%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } .figure.effect-10 p { margin: 10px; padding: 30px; border: 1px solid #fff; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, 20px, 0) scale(1.1); transform: translate3d(0, 20px, 0) scale(1.1); } .figure.effect-10:hover h2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-10:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } /*---------------*/ /***** 11 *****/ /*---------------*/ .figure.effect-11 { background: #2e5d5a; } .figure.effect-11 img { max-width: none; width: -webkit-calc(100% + 60px); width: calc(100% + 60px); opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.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-11:hover img { opacity: 0.5; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .figure.effect-11 h2 { position: absolute; right: 0; bottom: 0; padding: 1em 1.2em; } .figure.effect-11 p { padding: 0 10px 0 0; width: 50%; border-right: 1px solid #fff; text-align: right; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); } .figure.effect-11:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*---------------*/ /***** 12 *****/ /*---------------*/ .figure.effect-12 { 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-12 img { -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .figure.effect-12:hover img { opacity: 0.4; } .figure.effect-12 .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 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .figure.effect-12:hover .figcaption::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .figure.effect-12 .figcaption { /* padding: 3em; */ text-align: left; } .figure.effect-12 p { position: absolute; right: 60px; bottom: 60px; left: 60px; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); } .figure.effect-12:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*---------------*/ /***** Sarah *****/ /*---------------*/ figure.effect-sarah { background: #42b078; } figure.effect-sarah img { max-width: none; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.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: 0.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: 0.5em 0; } figure.effect-sarah h2::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; content:''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.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 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.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); } /*---------------*/ /***** Zoe *****/ /*---------------*/ figure.effect-zoe figcaption { top: auto; bottom: 0; padding: 1em; height: 3.75em; background: #fff; color: #3c4a50; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.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-transition: opacity 0.35s; transition: opacity 0.35s; -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */ } figure.effect-zoe h2, figure.effect-zoe p.icon-links a { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.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: 0.05s; transition-delay: 0.05s; } figure.effect-zoe:hover p.icon-links a:nth-child(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.effect-zoe:hover p.icon-links a:nth-child(2) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } figure.effect-zoe:hover p.icon-links a:first-child { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } /*---------------*/ /***** Chico *****/ /*---------------*/ figure.effect-chico img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.12); transform: scale(1.12); } figure.effect-chico:hover img { opacity: 0.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 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.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); } @media screen and (max-width: 50em) { .figure { display: inline-block; float: none; margin: 10px auto; width: 100%; } }