<div class="effect eff-12"> <img src="img/ef12.jpg" alt="Effect #12" /> <div class="overlay"> <div class="icon"></div> </div> <div class="gradient"></div> <div class="inner-gradient"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-12 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transition: all 0.25s linear 0.2s; }
.eff-12 .inner-gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transition: all 0.25s linear 0.2s; }
.eff-12 .caption { position: absolute; top: 0px; left: 100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
.eff-12 .overlay { width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); border-right: 50px solid rgba(255,255,255,0.6); position: absolute; right: 0; bottom: 0; transform-origin: right; transition: all 0.2s linear 0s; } .eff-12 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 5px; transition: all 0.01s linear 0.2s; }
.eff-12:hover .gradient { opacity: 0; }
.eff-12:hover .inner-gradient { opacity: 1; }
.eff-12:hover .overlay { transform: scaleX(0); } .eff-12:hover .overlay .icon { opacity: 0; transition-delay: 0s; }
.eff-12:hover .caption { left: 0px; transition-delay: 0.35s; }
<div class="effect eff-13"> <img src="img/ef13.jpg" alt="Effect #13" /> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-13 img { min-width: 100%; min-height: 100%; transform: scale(1.3); transition: all 0.15s linear 0s; }
.eff-13 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-13 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; opacity: 1; transition: all 0.01s linear 0s; }
.eff-13 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-13 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; opacity: 0; transition: all 0.2s linear 0s; } .eff-13 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-13 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; opacity: 0; transition: all 0.2s linear 0s; } .eff-13 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; opacity: 0; text-decoration: none; transition: all 0.2s linear 0s; }
.eff-13:hover img { transform: scale(1); }
.eff-13:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-13:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; }
.eff-13:hover .caption h4, .eff-13:hover .caption p, .eff-13:hover .caption a { opacity: 1; } .eff-13:hover .caption h4 { transition-delay: 0.5s; } .eff-13:hover .caption p { transition-delay: 0.4s; } .eff-13:hover .caption a { transition-delay: 0.3s; }
<div class="effect eff-14"> <img src="img/ef14.jpg" alt="Effect #14" /> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-14 img { min-width: 100%; min-height: 100%; height: calc(100% + 30px); width: calc(100% + 30px); transform: translate(-30px,0); transition: all 0.15s linear 0s; }
.eff-14 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-14 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; transition: all 0.01s linear 0s; }
.eff-14 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-14 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; top: -200px; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } .eff-14 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-14 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; position: relative; top: -250px; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } .eff-14 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; top: -300px; position: relative; text-decoration: none; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; }
.eff-14:hover img { transform: translate(0,0); }
.eff-14:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-14:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; }
.eff-14:hover .caption h4, .eff-14:hover .caption p, .eff-14:hover .caption a { top: 0px; } .eff-14:hover .caption h4 { transition-delay: 0.5s; } .eff-14:hover .caption p { transition-delay: 0.4s; } .eff-14:hover .caption a { transition-delay: 0.3s; }
<div class="effect eff-15"> <img src="img/ef15.jpg" alt="Effect #15" /> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-15 img { min-width: 100%; min-height: 100%; height: calc(100% + 30px); width: calc(100% + 30px); transform: translate(-30px,-30px) scale(1); transition: all 0.15s linear 0s; }
.eff-15 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-15 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; transition: all 0.01s linear 0s; }
.eff-15 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-15 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; left: 400px; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } .eff-15 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-15 .caption p { width: 100%; max-width: -webkit-calc(80% - 20px); max-width: -o-calc(80% - 20px); max-width: -moz-calc(80% - 20px); max-width: -ms-calc(80% - 20px); max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; position: relative; left: 400px; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } .eff-15 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; left: 400px; position: relative; text-decoration: none; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; }
.eff-15:hover img { transform: translate(0px,0px) scale(1.1); }
.eff-15:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-15:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; }
.eff-15:hover .caption h4, .eff-15:hover .caption p, .eff-15:hover .caption a { left: 0px; } .eff-15:hover .caption h4 { transition-delay: 0.3s; } .eff-15:hover .caption p { transition-delay: 0.35s; } .eff-15:hover .caption a { transition-delay: 0.4s; }
<div class="effect eff-16"> <img src="img/ef16.jpg" alt="Effect #16" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-16 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-16 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; }
.eff-16 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.eff-16 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; opacity: 0; transition: all 0.2s linear 0s; }
.eff-16 .triangle-1 { border-top: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; }
.eff-16 .triangle-2 { border-right: 150px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-16 .triangle-3 { border-bottom: 150px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-16 .triangle-4 { border-left: 150px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; }
.eff-16 .caption { position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
.eff-16:hover .overlay { right: -45px; } .eff-16:hover .overlay .icon { opacity: 0; }
.eff-16:hover .triangle { opacity: 1; } .eff-16:hover .triangle-1 { transition-delay: 0.2s; } .eff-16:hover .triangle-2 { transition-delay: 0.55s; } .eff-16:hover .triangle-3 { transition-delay: 0.4s; } .eff-16:hover .triangle-4 { transition-delay: 0.35s; }
.eff-16:hover .caption { left: 0px; transition-delay: 0.6s; }
<div class="effect eff-17"> <img src="img/ef17.jpg" alt="Effect #17" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-17 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-17 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; }
.eff-17 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.eff-17 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; opacity: 0; transform: rotate(-90deg); transition: all 0.2s linear 0s; }
.eff-17 .triangle-1 { border-top: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-17 .triangle-2 { border-right: 150px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-17 .triangle-3 { border-bottom: 150px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-17 .triangle-4 { border-left: 150px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; }
.eff-17 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; }
.eff-17:hover .overlay { right: -45px; } .eff-17:hover .overlay .icon { opacity: 0; }
.eff-17:hover .triangle { opacity: 1; transform: rotate(0deg); } .eff-17:hover .triangle-1 { transition-delay: 0.2s; } .eff-17:hover .triangle-2 { transition-delay: 0.35s; } .eff-17:hover .triangle-3 { transition-delay: 0.4s; } .eff-17:hover .triangle-4 { transition-delay: 0.55s; }
.eff-17:hover .caption { opacity: 1; transition-delay: 0.6s; }
<div class="effect eff-18"> <img src="img/ef18.jpg" alt="Effect #18" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-18 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-18 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; }
.eff-18 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.eff-18 .triangle { position: absolute; width: 0px; height: 0px; opacity: 0; border: 5px solid transparent; transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; }
.eff-18 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
.eff-18:hover .overlay { right: -45px; } .eff-18:hover .overlay .icon { opacity: 0; }
.eff-18:hover .triangle { opacity: 1; border-width: 150px; }
.eff-18:hover .caption { top: 0px; transition-delay: 0.35s }
<div class="effect eff-19"> <img src="img/ef19.jpg" alt="Effect #19" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-19 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-19 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-19 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; }
.eff-19 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; }
.eff-19 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.eff-19 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; transition: all 0.3s linear 0s; } .eff-19 .triangle-1 { border-top: 0px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-19 .triangle-2 { border-right: 0px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-19 .triangle-3 { border-bottom: 0px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-19 .triangle-4 { border-left: 0px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; }
.eff-19 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; }
.eff-19:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-19:hover .overlay .icon { opacity: 0; }
.eff-19:hover .triangle { opacity: 1; transition-delay: 0.2s; } .eff-19:hover .triangle-1 { border-top: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-2 { border-right: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-3 { border-bottom: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-4 { border-left: 30px solid rgba(255,255,255,0.7); }
.eff-19:hover .caption { opacity: 1; transition-delay: 0.3s; }
<div class="effect eff-20"> <img src="img/ef20.jpeg" alt="Effect #20" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-20 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-20 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-20 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } .eff-20 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; }
.eff-20 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.eff-20 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; transition: all 0.3s linear 0s; } .eff-20 .triangle-1 { border-top: 40px solid rgba(255,255,255,0.6); border-left: 40px solid rgba(255,255,255,0.6); top: 0px; left: -100%; } .eff-20 .triangle-2 { border-right: 40px solid rgba(255,255,255,0.6); border-bottom: 40px solid rgba(255,255,255,0.6); bottom: 0px; right: -100%; }
.eff-20 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; }
.eff-20:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-20:hover .overlay .icon { opacity: 0; }
.eff-20:hover .triangle { transition-delay: 0.2s; } .eff-20:hover .triangle-1 { left: 0px; } .eff-20:hover .triangle-2 { right: 0px; }
.eff-20:hover .caption { top: 0px; transition-delay: 0.5s; }
<div class="effect eff-21"> <img src="img/ef21.jpg" alt="Effect #21" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>
.eff-21 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-21 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-21 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } .eff-21 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; }
.eff-21 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; border-top: 150px solid rgba(255,255,255,0.6); border-left: 500px solid rgba(255,255,255,0.6); border-bottom: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; opacity: 0; transition: all 0.3s linear 0s; }
.eff-21 .caption { position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; }
.eff-21:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-21:hover .overlay .icon { opacity: 0; }
.eff-21:hover .triangle { opacity: 1; border-left: 100px solid rgba(255,255,255,0.6); }
.eff-21:hover .caption { left: 0px; transition-delay: 0.3s; }
Source: https://habr.com/ru/post/274005/