Bourbon overlay

Developer
Luna Eye
Size
2,559 Kb
Views
20,240
  1. Bourbon overlay Previews
  2. Bourbon overlay HTML Codes
  3. Bourbon overlay CSS Codes

How do I make an bourbon overlay?

Bourbon refill component http://refills.bourbon.io/components/. What is a bourbon overlay? How do you make a bourbon overlay? This script and codes were developed by Luna Eye on 16 October 2022, Sunday.

Bourbon overlay Previews
IQ Test

Bourbon overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bourbon overlay</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hover-tile-outer"> <div class="hover-tile-container"> <div class="hover-tile hover-tile-visible"></div> <div class="hover-tile hover-tile-hidden"> <h4>Hidden Copy</h4> <p>Lorem ipsum dolor provident eligendi fugiat ad exercitationem sit amet, consectetur adipisicing elit. Unde, provident eligendi.</p> </div> </div>
</div>
</body>
</html>

Bourbon overlay - Script Codes CSS Codes

body { padding: 2em;
}
.hover-tile-outer { background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"); background-color: beige; background-position: top; background-size: cover; border: 1px solid gainsboro; cursor: pointer; height: 10em; margin-bottom: 1.5em; width: 40%;
}
.hover-tile-outer .hover-tile-container { height: 10em; overflow: hidden;
}
.hover-tile-outer .hover-tile-container:hover > .hover-tile { transform: translate(0, -100%);
}
.hover-tile-outer .hover-tile { background: inherit; color: white; height: inherit; overflow: hidden; padding: 1.5em; transition: all 0.2s ease-in-out;
}
.hover-tile-outer .hover-tile-hidden { background: rgba(0, 0, 0, 0.5);
}
.hover-tile-outer .hover-tile-hidden p { color: rgba(255, 255, 255, 0.7); line-height: 1.5em;
}
.hover-tile-outer .hover-tile-hidden h4 { margin: 0 0 0.5em 0;
}
Bourbon overlay - Script Codes
Bourbon overlay - Script Codes
Home Page Home
Developer Luna Eye
Username lunaman
Uploaded October 16, 2022
Rating 3
Size 2,559 Kb
Views 20,240
Do you need developer help for Bourbon 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!

Luna Eye (lunaman) Script Codes
Name
Nth-of-type testing
Particles and Electron
Benefits definition - VPO
CreateJS masking
Lifecycle
JQuery Validate checkbox group
Business Led Change
Simple CSS overlay
Transparent PNG overlay background image
User-Suppliers - VPO
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!