CSS Transitions Transforms Reveal v1.0
How do I make an css transitions transforms reveal v1.0?
CSS Animation hover reveals different image. What is a css transitions transforms reveal v1.0? How do you make a css transitions transforms reveal v1.0? This script and codes were developed by David Klotz on 23 January 2023, Monday.
CSS Transitions Transforms Reveal v1.0 Previews
CSS Transitions Transforms Reveal v1.0 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Transitions Transforms Reveal v1.0</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scaleable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row-wrapper"> <div class="photo-box-column"> <div class="photo-box-reveal"> <div class="color-overlay iron"></div> <img src="https://photos.smugmug.com/Codepen/i-SRVvw6M/0/9acc0255/O/ironman.jpg" class="fade-reveal"> <img src="https://photos.smugmug.com/Codepen/i-hZjVVDk/0/707d1f5a/O/tonystark.jpg" class="fade-zoom"> <div class="photo-overlay-title"> <div class="photo-overlay-text-title"> <h4>Tony Stark</h4> </div> </div> <div class="photo-overlay"> <div class="photo-overlay-text"> <h3>Ironman</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p></div> </div> </div> </div> <div class="photo-box-column"> <div class="photo-box-reveal"> <div class="color-overlay cap"></div> <img src="https://photos.smugmug.com/Codepen/i-NK7kHx2/0/5e0327d8/O/captainamerica.jpg" class="fade-reveal"> <img src="https://photos.smugmug.com/Codepen/i-Zssxzzb/0/e73c2442/O/steverogers.jpg" class="fade-zoom"> <div class="photo-overlay-title"> <div class="photo-overlay-text-title"> <h4>Steve Rogers</h4> </div> </div> <div class="photo-overlay"> <div class="photo-overlay-text"> <h3>Captain America</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p></div> </div> </div> </div> <div class="photo-box-column"> <div class="photo-box-reveal"> <div class="color-overlay hulk"></div> <img src="https://photos.smugmug.com/Codepen/i-jVskSJZ/0/896af8d6/O/hulk.jpg" class="fade-reveal"> <img src="https://photos.smugmug.com/Codepen/i-RCZ7v8f/0/dbfa0f82/O/davidbanner.jpg" class="fade-zoom"> <div class="photo-overlay-title"> <div class="photo-overlay-text-title"> <h4>David Banner</h4> </div> </div> <div class="photo-overlay"> <div class="photo-overlay-text"> <h3>Hulk</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p></div> </div> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
</body>
</html>CSS Transitions Transforms Reveal v1.0 - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,700");
html { box-sizing: border-box;
}
*, *::after, *::before { box-sizing: inherit;
}
body { background: #000; font-family: "Roboto", sans-serif;
}
body p { font-weight: 100;
}
.row-wrapper { display: block; padding: 0; margin: 0;
}
.row-wrapper::after { clear: both; content: ""; display: table;
}
.photo-box-column { display: table-cell; width: 25%; margin: 0; padding: 0;
}
.photo-box-reveal { position: relative; line-height: 0; min-width: 100%; height: auto; margin-top: -2px; text-align: left; overflow: hidden;
}
.photo-box-reveal .photo-box a { color: #fff; display: block;
}
.photo-box-reveal:hover img.fade-zoom { transform: scale3d(1.2, 1.2, 1); opacity: 0;
}
.photo-box-reveal:hover.fade-reveal { -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1);
}
.photo-box-reveal:hover .photo-overlay-text-title { opacity: 0; transform: translateY(100%);
}
.photo-box-reveal:hover .photo-overlay-text h3,
.photo-box-reveal:hover .photo-overlay-text p { opacity: 1; transform: translateY(0%);
}
.photo-box-reveal:hover .color-overlay { opacity: 1; transform: translateY(10%);
}
.photo-box-reveal p { line-height: 1.5; max-width: 70%;
}
.photo-box-reveal img { min-width: 100%; width: 100%; height: auto;
}
.photo-box-reveal img.fade-zoom { opacity: 1; transition-duration: .6s; transition-property: opacity, transform; transform: scale3d(1.1, 1.1, 1);
}
.photo-box-reveal img.fade-reveal { position: absolute; transition-duration: .4s; transition-property: transform; transform-timing-function: ease-in-out; transform: scale3d(1.1, 1.1, 1);
}
.photo-box-reveal .photo-overlay-text { position: absolute; bottom: 0; left: 0; padding-right: 30px; padding-left: 40px; margin-bottom: 20px;
}
.photo-box-reveal .photo-overlay-text p { opacity: 0; transition-duration: .8s, .3s; transition-property: opacity, transform; transition-delay: .2s; transform-timing-function: ease-in-out; transform: translateY(100%);
}
.photo-box-reveal .photo-overlay-text h3 { opacity: 0; transition-duration: .8s, .3s; transition-property: opacity, transform; transition-delay: .2s; transform-timing-function: ease-in-out; transform: translateY(-100%);
}
.photo-box-reveal .photo-overlay-title { color: #fff; top: 0; right: 0; bottom: 0; left: 0; position: absolute; display: flex; /* For centering text inside .photo-overlay */ flex-direction: column; justify-content: center; align-items: left; z-index: 2; padding-left: 40px; padding-right: 40px;
}
.photo-box-reveal .photo-overlay-title .photo-overlay-text-title { position: absolute; bottom: 0; margin-bottom: 30px;
}
.photo-box-reveal .photo-overlay-text-title { opacity: 1; transition-duration: .2s, .4s; transition-delay: 0s; transition-property: opacity, transform; transform-timing-function: ease-in;
}
.photo-box-reveal .photo-overlay { color: #fff; top: 0; right: 0; bottom: 0; left: 0; position: absolute; display: flex; /* For centering text inside .photo-overlay */ flex-direction: column; justify-content: center; align-items: center; padding-left: 40px; padding-right: 40px; z-index: 2; background-color: rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity .3s;
}
.photo-box-reveal .photo-overlay:hover { opacity: 1;
}
.photo-box-reveal .color-overlay { position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 1; transition-duration: .2s, .6s; transition-property: opacity, transform; transform-timing-function: ease-in-out; transform: translateY(100%);
}
.photo-box-reveal .color-overlay.iron { background-image: linear-gradient(to top, #ad1f23, rgba(255, 255, 255, 0) 75%);
}
.photo-box-reveal .color-overlay.cap { background-image: linear-gradient(to top, #266497, rgba(255, 255, 255, 0) 75%);
}
.photo-box-reveal .color-overlay.hulk { background-image: linear-gradient(to top, #253324, rgba(255, 255, 255, 0) 75%);
}
| Developer | David Klotz |
| Username | dkdesign |
| Uploaded | January 23, 2023 |
| Rating | 3.5 |
| Size | 4,083 Kb |
| Views | 6,072 |
Do you need developer help for CSS Transitions Transforms Reveal v1.0?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
David Klotz (dkdesign) Script Codes
| Name | Size |
| A Pen by David Klotz | 5,064 Kb |
| Basic Fullscreen Hero | 3,040 Kb |
| Tout with hover content | 3,138 Kb |
| My Starter Kit For Codepen | 2,012 Kb |
| Responsive Testimonial Slider v1.0 | 3,802 Kb |
| Tout Pattern | 3,136 Kb |
| Flexbox Media Object | 3,221 Kb |
| Tout box hover content overlay | 4,242 Kb |
| Bourbon refill accordion tabs | 3,856 Kb |
| Flexbox Layout | 3,647 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Eunice A | Ejbronze | 2,203 Kb |
| Flying Bee | Pwsm50 | 3,711 Kb |
| CSS3 Snow Animation | NickyCDK | 1,695 Kb |
| A Pen by Jess | Jessamyne | 5,100 Kb |
| Dice | Fraina | 5,026 Kb |
| Yuliya v krylova | Rafszul | 37,351 Kb |
| Heartbeat | Apetrov | 2,079 Kb |
| Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| Angular Route | Arun_v606 | 1,837 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!