Image and text hover effect with filter and inline SVG
How do I make an image and text hover effect with filter and inline svg?
A complex hover effect which takes an image and makes it a background and adds an animated svg stripe pattern (hand written) with some image filters. Additionally it takes a text and transforms it in 3d and creates something that looks a bit like a chromatic distortion. That's made with text shadow.. What is a image and text hover effect with filter and inline svg? How do you make a image and text hover effect with filter and inline svg? This script and codes were developed by Jeremias Erbs on 09 December 2022, Friday.
Image and text hover effect with filter and inline SVG Previews
Image and text hover effect with filter and inline SVG - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image and text hover effect with filter and inline SVG</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,900" rel="stylesheet"> <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="container"> <div class="teaser"> <h1 class="teaser-headline">this is the new stuff</h1> <!-- just some image from the burlington website --> <img src="https://cdnssl02.falke.com/files/589ca6948b864.jpeg" alt=""> </div>
</div> <script src="js/index.js"></script>
</body>
</html>Image and text hover effect with filter and inline SVG - Script Codes CSS Codes
html,
body { height: 100%;
}
body { font-family: 'Roboto', sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.container { width: 300px;
}
.teaser { background-size: 0, 100%; box-shadow: inset 0 0 0 white; cursor: pointer; width: 800px; position: relative; -webkit-transition: background-position 0.3s ease-out, box-shadow 0.3s ease, -webkit-filter 0.7s ease; transition: background-position 0.3s ease-out, box-shadow 0.3s ease, -webkit-filter 0.7s ease; transition: background-position 0.3s ease-out, box-shadow 0.3s ease, filter 0.7s ease; transition: background-position 0.3s ease-out, box-shadow 0.3s ease, filter 0.7s ease, -webkit-filter 0.7s ease;
}
.teaser:hover { background-blend-mode: color-dodge; background-position: 72px 0, 0 0; background-size: 7px, 100%; box-shadow: inset 0 0 24px 4px rgba(255, 255, 255, 0.3); -webkit-filter: brightness(1.1) grayscale(0.4); filter: brightness(1.1) grayscale(0.4); -webkit-transition: background-position 1.6s ease-out, box-shadow 1s ease, -webkit-filter 0.6s ease; transition: background-position 1.6s ease-out, box-shadow 1s ease, -webkit-filter 0.6s ease; transition: background-position 1.6s ease-out, box-shadow 1s ease, filter 0.6s ease; transition: background-position 1.6s ease-out, box-shadow 1s ease, filter 0.6s ease, -webkit-filter 0.6s ease;
}
.teaser img { display: block;
}
.teaser-headline { bottom: -18px; font-size: 48px; left: 24px; line-height: 0.9; margin: 0; -webkit-perspective: 200px; perspective: 200px; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: text-shadow 0.5s ease, -webkit-transform 0.2s ease; transition: text-shadow 0.5s ease, -webkit-transform 0.2s ease; transition: transform 0.2s ease, text-shadow 0.5s ease; transition: transform 0.2s ease, text-shadow 0.5s ease, -webkit-transform 0.2s ease; z-index: 1;
}
.teaser:hover .teaser-headline { text-shadow: 4px 10px 0 rgba(210, 120, 180, 0.4), -3px -10px 0 rgba(140, 230, 210, 0.6); -webkit-transform: rotateX(10deg) rotateY(-20deg) scale(1.2) translateZ(10px); transform: rotateX(10deg) rotateY(-20deg) scale(1.2) translateZ(10px); -webkit-transition: text-shadow 0.2s ease, -webkit-transform 0.1s ease; transition: text-shadow 0.2s ease, -webkit-transform 0.1s ease; transition: transform 0.1s ease, text-shadow 0.2s ease; transition: transform 0.1s ease, text-shadow 0.2s ease, -webkit-transform 0.1s ease;
}
Image and text hover effect with filter and inline SVG - Script Codes JS Codes
window.addEventListener('load', () => { const teaser = document.querySelector('.teaser'); const img = teaser.querySelector('img'); createBackgroundWithImageSource(teaser, img);
})
function createBackgroundWithImageSource (teaser, img) { const teaserSize = teaser.getBoundingClientRect(); // merge new styles into existing teaser styles Object.assign(teaser.style, { // two background-images: the stripes and the image backgroundImage: `url('${stripePattern}'), url('${img.src}')`, width: `${teaserSize.width}px`, // needed as we will hide img height: `${teaserSize.height}px` // needed as we will hide img }); img.style.display = 'none'; // hide image to see background
}
// A handwritten svg with a few lines.
// 'M' means 'move to a point'
// 'L' means 'draw a line to a point'
const stripePattern = 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7"> <path d="M -1 2 L 2 -1 M 0 8 L 8 0 M 7 8 L 8 7" stroke="#222" stroke-width="2"/> </svg>';
| Developer | Jeremias Erbs |
| Username | badabam |
| Uploaded | December 09, 2022 |
| Rating | 3 |
| Size | 3,797 Kb |
| Views | 8,096 |
Do you need developer help for Image and text hover effect with filter and inline SVG?
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!
Jeremias Erbs (badabam) Script Codes
| Name | Size |
| Open and slide out content | 3,829 Kb |
| Simple page for beginners lessons. | 3,068 Kb |
| Word combinator | 3,432 Kb |
| Better jQuery event handler example | 2,928 Kb |
| Animate elements with fixed gradient | 4,406 Kb |
| Shopping cart animation | 0 Kb |
| A 1x1 transparent base64 gif. | 1,942 Kb |
| Circle through values in array | 1,903 Kb |
| Simple icon element with any centered content | 2,880 Kb |
| Button with stripe shadow | 3,602 Kb |
Create amazing SEO 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 |
| Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
| Menu | Vivi_Lai | 1,210 Kb |
| CSS Parent Selector | Tomhodgins | 2,143 Kb |
| Flip test | Madhes | 1,635 Kb |
| The Fly | GianlucaGuarini | 3,405 Kb |
| Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| Out of the blue | Giaco | 2,537 Kb |
| Donald Trump - The New Yorker | Agbales | 2,502 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 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!