Hover image Effect only css

15 CSS image Effects | efectos hover en las imágenes

Hover Effect Ideas, Inspiration for subtle hover effects | 15 efectos hover para las imágenes con subtitulo.

By quatmo


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


DEMO
HTML

<div class="container">
<div class="grid">
<figure class="effect-lily">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img01"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-sadie">
<img src="https://tympanus.net/Development/HoverEffectIdeas/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>
<figure class="effect-honey">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/7.jpg" alt="img07"/>
<figcaption>
<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-layla">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/4.jpg" alt="img04"/>
<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>
<figure class="effect-zoe">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/14.jpg" alt="img14"/>
<figcaption>
<h2>Creative <span>Zoe</span></h2>
<span class="icon-heart"></span>
<span class="icon-eye"></span>
<span class="icon-paper-clip"></span>
<p>Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08"/>
<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>
<figure class="effect-marley">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/9.jpg" alt="img09"/>
<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>
<figure class="effect-ruby">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/10.jpg" alt="img10"/>
<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>
<figure class="effect-roxy">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/3.jpg" alt="img03"/>
<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>
<figure class="effect-bubba">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/6.jpg" alt="img06"/>
<figcaption>
<h2>Fresh <span>Bubba</span></h2>
<p>Bubba likes to appear out of thin air.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-romeo">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/5.jpg" alt="img05"/>
<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>
<figure class="effect-dexter">
<img src="https://tympanus.net/Development/HoverEffectIdeas/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>
<figure class="effect-sarah">
<img src="https://tympanus.net/Development/HoverEffectIdeas/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>
<figure class="effect-chico">
<img src="https://tympanus.net/Development/HoverEffectIdeas/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>
<figure class="effect-milo">
<img src="https://tympanus.net/Development/HoverEffectIdeas/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>
</div><!-- /container -->
CSS

*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both}
body{background:#f6f9fa;color:#536d76;font-weight:400;font-size:1em;font-family:Raleway,Arial,sans-serif}
a{color:#4f7f90;text-decoration:none;outline:0}
a:focus,a:hover{color:#39545e}
section{padding:1em;text-align:center}
.codrops-header{margin:0 auto;padding:4em 1em;text-align:center}
.codrops-header h1{margin:0;font-weight:800;font-size:4em;line-height:1.3}
.codrops-header h1 span{display:block;padding:0 0 .6em .1em;font-size:45%;font-weight:300;color:#7e959d}
.codrops-top{width:100%;text-transform:uppercase;font-size:.69em;line-height:2.2}
.codrops-top a{display:inline-block;padding:0 1em;text-decoration:none;letter-spacing:1px}
.codrops-top span.right{float:right}
.codrops-top span.right a{display:block;float:left}
.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:400;font-style:normal;font-variant:normal;font-family:codropsicons;line-height:1;speak:none;-webkit-font-smoothing:antialiased}
.codrops-icon-drop:before{content:"\e001"}
.codrops-icon-prev:before{content:"\e004"}
.related{padding:6em 1em;font-size:120%}
.related>a{border:1px solid #4f7f90;display:inline-block;text-align:center;margin:20px 10px;padding:25px}
.related a:hover{border-color:#39545e}
.related a img{max-width:100%;opacity:.8}
.related a:active img,.related a:hover img{opacity:1}
.related a h3{margin:0;padding:.5em 0 .3em;max-width:300px;text-align:left}
@media screen and (max-width:25em){.codrops-header{font-size:75%}
.codrops-icon span{display:none}}
.grid{overflow:hidden;margin:0;padding:3em 0 0;width:100%;list-style:none;text-align:center}
.grid figure{position:relative;z-index:1;display:inline-block;overflow:hidden;margin:-.135em;width:33.333%;height:400px;background:#3085a3;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:block;min-height: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::after,.grid figure figcaption::before{pointer-events:none}
.grid figure a,.grid figure figcaption{position:absolute;top:0;left:0;width:100%;height:100%}
.grid figure a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure h2{word-spacing:-.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%}
figure.effect-lily img{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{top:auto;bottom:0;height:50%;text-align:left}
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,.6);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 h2,figure.effect-lily:hover img,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}
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,.8) 75%);background:linear-gradient(to bottom,rgba(72,76,97,0) 0,rgba(72,76,97,.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)}
figure.effect-roxy{background:-webkit-linear-gradient(45deg,#ff89e9 0,#05abe0 100%);background:linear-gradient(45deg,#ff89e9 0,#05abe0 100%)}
figure.effect-roxy img{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}
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)}
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::after,figure.effect-bubba figcaption::before{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::after,figure.effect-bubba:hover figcaption::before{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)}
figure.effect-romeo{-webkit-perspective:1000px;perspective:1000px}
figure.effect-romeo img{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,0,300px);transform:translate3d(0,0,300px)}
figure.effect-romeo:hover img{opacity:.6;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-romeo figcaption::after,figure.effect-romeo figcaption::before{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)}
figure.effect-layla{background:#18a367}
figure.effect-layla img{min-width:100%;height:-webkit-calc(100% + 40px);height:calc(100% + 40px)}
figure.effect-layla figcaption{padding:3em}
figure.effect-layla figcaption::after,figure.effect-layla figcaption::before{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 h2,figure.effect-layla img{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}
figure.effect-layla figcaption::after,figure.effect-layla figcaption::before,figure.effect-layla img,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::after,figure.effect-layla:hover figcaption::before{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 img,figure.effect-layla:hover p{-webkit-transition-delay:.15s;transition-delay:.15s}
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)}
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,.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;-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}
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)}
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)}
figure.effect-milo{background:#2e5d5a}
figure.effect-milo img{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)}
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)}
figure.effect-sarah{background:#42b078}
figure.effect-sarah img{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)}
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 figcaption>span{float:right}
figure.effect-zoe p{position:absolute;bottom:8em;padding:2em;color:#fff;text-transform:none;font-size:90%;opacity:0;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-zoe figcaption>span,figure.effect-zoe h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,200%,0);transform:translate3d(0,200%,0)}
figure.effect-zoe figcaption>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{opacity:1}
figure.effect-zoe:hover figcaption,figure.effect-zoe:hover figcaption>span,figure.effect-zoe:hover h2{-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 figcaption>span:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}
figure.effect-zoe:hover figcaption>span:nth-child(3){-webkit-transition-delay:.15s;transition-delay:.15s}
figure.effect-zoe:hover figcaption>span:nth-child(2){-webkit-transition-delay:.2s;transition-delay:.2s}
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}
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:69.5em){.grid figure{width:50%}
.grid figure figcaption{font-size:90%}}
@media screen and (max-width:41.5em){.grid figure{width:100%}}
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones