Image with Text Hover Effect
How do I make an image with text hover effect?
What is a image with text hover effect? How do you make a image with text hover effect? This script and codes were developed by Hayden Mills on 14 August 2022, Sunday.
Image with Text Hover Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image with Text Hover Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <div class="hover-container"> <img class="hover" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img> <h1>Project Title</h1> </div>
</section>
</body>
</html>
Image with Text Hover Effect - Script Codes CSS Codes
.hover-container { width: 33.3333333333333333333333333333333333333333333333333%; background-size:cover; overflow:hidden; position:relative;
}
.hover { width: 100%;
}
.hover-container h1 { text-align:center; position:absolute; top:50%; width:100%; transform:translate(0%,-50%); -webkit-transform:translate(0%,-50%); -ms-transform:translate(0%,-50%); color:#FFFFFF; font-family:Arial; text-transform:uppercase; display:none;
}
.hover-container:hover img { filter: brightness(0.3); -webkit-filter:brightness(0.3); -ms-filter:brightness(0.3);
}
.hover-container:hover h1 { display:block;
}
@media only screen and (max-width : 1000px) { /*row of two boxes*/ .hover-container { width: 50%; }
}
Developer | Hayden Mills |
Username | haydenmills |
Uploaded | August 14, 2022 |
Rating | 3 |
Size | 1,756 Kb |
Views | 28,336 |
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!
Name | Size |
Simple Buttons | 1,750 Kb |
Responsive Image and Text Overlay | 2,121 Kb |
Responsive Navigation Bar | 2,729 Kb |
Cool CSS Gradient Background | 1,589 Kb |
Pushy Nav | 4,425 Kb |
Hover Over Image | 1,692 Kb |
A Pen by Hayden Mills | 3,954 Kb |
Top Menu Fixed After Image | 2,393 Kb |
CSS Text Drop Shadow | 1,613 Kb |
JQuery Text Fade In | 1,812 Kb |
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!
Name | Username | Size |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Sticky footer testing | 75th | 1,649 Kb |
Gears | Synvox | 3,278 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
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!