Tout with hover content

Developer
David Klotz
Size
3,138 Kb
Views
4,048
  1. Tout with hover content Previews
  2. Tout with hover content HTML Codes
  3. Tout with hover content CSS Codes

How do I make an tout with hover content?

Hover animation reveals description. What is a tout with hover content? How do you make a tout with hover content? This script and codes were developed by David Klotz on 23 January 2023, Monday.

Tout with hover content Previews
IQ Test

Tout with hover content - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tout with hover content</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scaleable=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hover-box">	<img src="http://digitalspyuk.cdnds.net/17/21/1600x800/landscape-1495474029-game-of-thrones2.jpg">	<div class="hover-box__title">	<h2>Night's King</h2>	<p>This is one frosty dude.</p>	</div>	<div class="hover-box__overlay"></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>

Tout with hover content - 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;
}
h1, h2, h3, h4, h5, h6 { font-weight: 200;
}
img { width: 100%; height: auto;
}
.hover-box { position: relative; line-height: 0; width: 800px; height: auto; color: #C7C5C6; text-align: left; overflow: hidden;
}
.hover-box .hover-box a { color: #C7C5C6; display: block;
}
.hover-box img { opacity: 1; min-width: 100%; transition-duration: .6s; transition-property: opacity, transform; transform: scale3d(1.1, 1.1, 1);
}
.hover-box:hover img { transform: scale3d(1.2, 1.2, 1); opacity: .4;
}
.hover-box .hover-box__title { top: 0; right: 0; bottom: 0; left: 0; position: absolute; display: flex; /* For centering text inside .overlay */ flex-direction: column; justify-content: center; align-items: center; z-index: 6; padding-left: 40px; padding-right: 40px;
}
.hover-box .hover-box__title h2 { opacity: 1; transition-duration: .8s, .3s; transition-property: opacity, transform; transform-timing-function: ease-in-out; transform: translateY(100%);
}
.hover-box .hover-box__title:hover h2 { opacity: 1; transform: translateY(0%);
}
.hover-box .hover-box__title p { opacity: 0; position: absolute; transition-duration: .8s, .3s; transition-property: opacity, transform; transition-delay: .2s; transform-timing-function: ease-in-out; transform: translateY(100%); padding-top: 60px; max-width: 420px; line-height: 1.5; text-align: center;
}
.hover-box .hover-box__title:hover p { opacity: 1; transform: translateY(0%);
}
.hover-box .hover-box__overlay { 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; z-index: 2; background-color: rgba(14, 14, 16, 0.6); opacity: .7; transition: opacity .3s;
}
.hover-box .hover-box__overlay:hover { opacity: 1;
}
Tout with hover content - Script Codes
Tout with hover content - Script Codes
Home Page Home
Developer David Klotz
Username dkdesign
Uploaded January 23, 2023
Rating 3
Size 3,138 Kb
Views 4,048
Do you need developer help for Tout with hover content?

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
Flexbox Layout
Responsive Testimonial Slider v1.0
CSS Transitions Transforms Reveal v1.0
Flexbox Media Object
My Starter Kit For Codepen
Tout box hover content overlay
Tout Pattern
Bourbon refill accordion tabs
A Pen by David Klotz
Basic Fullscreen Hero
Create amazing Facebook ads 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!