Tout box hover content overlay
How do I make an tout box hover content overlay?
Image hover with overlay - adapted from lessons learned about CSS animations at teamtreehouse.com. What is a tout box hover content overlay? How do you make a tout box hover content overlay? This script and codes were developed by David Klotz on 23 January 2023, Monday.
Tout box hover content overlay Previews
Tout box hover content overlay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tout box hover content overlay</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="dk-p-toutbox"> <div class="dk-p-toutbox__radial-gradient"></div> <div class="dk-p-toutbox__linear-gradient"></div> <img src="https://images-na.ssl-images-amazon.com/images/S/sgp-catalog-images/region_US/hbo_svod-Game_Of_Thrones_7-Full-Image_GalleryBackground-en-US-1499815621070._RI_SX940_.jpg" class="dk-p-toutbox__image"> <div class="dk-p-toutbox__content"> <div class="dk-p-toutbox__title"> <h3>Game of Thrones</h3> </div> </div> <div class="dk-p-toutbox--hover"> <div class="dk-p-toutbox__content--hover"> <h2>Game of Thrones <em>(Season 7)</em></h2> <p><span class="rating">★ ★ ★ ★ ★ 10/10 <strong>IMDB</strong></span><br><em>The penultimate Season 7 of this blockbuster hit series focuses on a convergence of armies and attitudes that have been brewing for years. </em></p> <p><span><small><strong>Stars: </strong> Peter Dinklage, Nikolaj Coster-Waldau, Lena Headey</small></span></p> </div> </div> </div>
</div>
</body>
</html>Tout box hover content overlay - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,700");
body { background: #000; font-family: 'Roboto', sans-serif; margin: 0; padding: 0; width: 100%; height: 100%; font-weight: 100;
}
h1, h2, h3, h4, h5, h6 { font-weight: 100;
}
.wrapper { width: 100%; height: 100%; max-width: 1000px; display: inline-block; position: relative;
}
/* toutbox */
.dk-p-toutbox { position: relative; line-height: 0; width: 100%; height: 100%; text-align: left; overflow: hidden;
}
.dk-p-toutbox .dk-p-toutbox__image { min-width: 100%; width: 100%; height: auto; opacity: 1; -webkit-transition-duration: .6s; transition-duration: .6s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1);
}
.dk-p-toutbox .dk-p-toutbox__content { color: #fff; top: 0; right: 0; bottom: 0; left: 0; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; /* For centering text inside .photo-overlay */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: left; -ms-flex-align: left; align-items: left; z-index: 2; padding-left: 40px; padding-right: 40px; opacity: 1;
}
.dk-p-toutbox .dk-p-toutbox__content .dk-p-toutbox__title { position: absolute; opacity: 1; width: 100%; height: 100%; left: 0; top: 0; padding: 30px; -webkit-transition-duration: .4s, .4s; transition-duration: .4s, .4s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; transform-timing-function: ease-in-out; background-color: rgba(0, 0, 0, 0.3);
}
.dk-p-toutbox .dk-p-toutbox__content .dk-p-toutbox__title h3 { -webkit-transition-duration: .4s, .4s; transition-duration: .4s, .4s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; transform-timing-function: ease-in-out;
}
.dk-p-toutbox .dk-p-toutbox--hover { color: #fff; top: 0; right: 0; bottom: 0; left: 0; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; /* For centering text inside .photo-overlay */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 40px; padding-right: 40px; z-index: 2; opacity: 1; -webkit-transition: opacity .3s; transition: opacity .3s;
}
.dk-p-toutbox .dk-p-toutbox__content--hover { position: absolute; bottom: 0; left: 0; max-width: 60%; padding-right: 30px; padding-left: 30px; margin-bottom: 20px;
}
.dk-p-toutbox .dk-p-toutbox__content--hover p { opacity: 0; -webkit-transition-duration: .6s, .3s; transition-duration: .6s, .3s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-delay: .2s; transition-delay: .2s; transform-timing-function: ease-in-out; -webkit-transform: translateY(100%); transform: translateY(100%); line-height: 1.6; max-width: 90%;
}
.dk-p-toutbox .dk-p-toutbox__content--hover p span { opacity: 0; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-delay: .2s; transition-delay: .2s;
}
.dk-p-toutbox .dk-p-toutbox__content--hover p span.rating { color: #F4C31C;
}
.dk-p-toutbox .dk-p-toutbox__content--hover h2 { opacity: 0; -webkit-transition-duration: .6s, .8s; transition-duration: .6s, .8s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-delay: .2s; transition-delay: .2s; transform-timing-function: ease-in-out; -webkit-transform: translateY(-100%); transform: translateY(-100%); line-height: .5;
}
.dk-p-toutbox:hover .dk-p-toutbox__image { opacity: 1; transform: scale3d(1.2, 1.2, 1); -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1);
}
.dk-p-toutbox:hover .dk-p-toutbox__content--hover h2, .dk-p-toutbox:hover .dk-p-toutbox__content--hover p { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); transform-timing-function: ease-in-out;
}
.dk-p-toutbox:hover .dk-p-toutbox__content--hover h2 span, .dk-p-toutbox:hover .dk-p-toutbox__content--hover p span { opacity: 1; -webkit-transition-duration: .8s; transition-duration: .8s; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-delay: .6s; transition-delay: .6s; transform-timing-function: ease-in-out;
}
.dk-p-toutbox:hover .dk-p-toutbox__title { opacity: 1; -webkit-transition-duration: .4s, .4s; transition-duration: .4s, .4s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-property: opacity; transition-property: opacity; transform-timing-function: ease-in-out;
}
.dk-p-toutbox:hover .dk-p-toutbox__title h3 { opacity: 0;
}
.dk-p-toutbox:hover .dk-p-toutbox__radial-gradient { opacity: .8; -webkit-transform: translateY(0%); transform: translateY(0%);
}
.dk-p-toutbox:hover .dk-p-toutbox__linear-gradient { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition-duration: 3s, .6s; transition-duration: 3s, .6s;
}
.dk-p-toutbox .dk-p-toutbox__radial-gradient { position: absolute; width: 100%; height: 100%; opacity: .2; z-index: 1; -webkit-transition-duration: .5s, .6s; transition-duration: .5s, .6s; -webkit-transition-delay: .2s; transition-delay: .2s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; transform-timing-function: ease-in-out; -webkit-transform: translateY(0%); transform: translateY(0%); background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0), #0d0d11 100%); background-image: radial-gradient(rgba(255, 255, 255, 0), #0d0d11 100%);
}
.dk-p-toutbox .dk-p-toutbox__linear-gradient { position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 1; -webkit-transition-duration: .4s, .6s; transition-duration: .4s, .6s; -webkit-transition-delay: .2s; transition-delay: .2s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; transform-timing-function: ease-in-out; -webkit-transform: translateY(0%); transform: translateY(0%); background-image: -webkit-linear-gradient(bottom, #1c1c1c, rgba(255, 255, 255, 0) 50%); background-image: linear-gradient(to top, #1c1c1c, rgba(255, 255, 255, 0) 50%);
}
| Developer | David Klotz |
| Username | dkdesign |
| Uploaded | January 23, 2023 |
| Rating | 3 |
| Size | 4,242 Kb |
| Views | 4,048 |
Do you need developer help for Tout box hover content overlay?
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 |
| Basic Fullscreen Hero | 3,040 Kb |
| A Pen by David Klotz | 5,064 Kb |
| Tout Pattern | 3,136 Kb |
| Tout with hover content | 3,138 Kb |
| Flexbox Layout | 3,647 Kb |
| Flexbox Media Object | 3,221 Kb |
| Bourbon refill accordion tabs | 3,856 Kb |
| My Starter Kit For Codepen | 2,012 Kb |
| Responsive Testimonial Slider v1.0 | 3,802 Kb |
| CSS Transitions Transforms Reveal v1.0 | 4,083 Kb |
Create amazing web content 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 |
| Weather App | OmranAbazid | 2,596 Kb |
| Button Option Group | Honchoman | 1,859 Kb |
| A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
| Click handler test | Snapson | 2,329 Kb |
| Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
| Wikipedia Viewer | Odylic | 2,333 Kb |
| Tab panels | Accessibility | 0 Kb |
| Vue.js Starter | Andymerskin | 1,268 Kb |
| Savemedia1.1 | EdsonAlcala | 2,148 Kb |
| A Pen by John Malc | F789gh | 1,420 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!