Adam B. answered • 10/19/23
Front-End Development Tutor & Corporate App Developer with UX Skills
You can create a hover button with a small window that pops up with images, headlines, or text content using CSS and HTML. One common way to achieve this effect is by using CSS for styling and a combination of HTML and CSS for the structure. Here's a step-by-step guide to creating such a hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="teststyles.css">
<title>Hover Button with Popup</title>
</head>
<body>
<div class="button-container">
<button class="hover-button">Hover Me</button>
<div class="popup">
<h2>Popup Content</h2>
<img src="image.jpg" alt="Image">
<p>This is some text content in the popup.</p>
</div>
</div>
</body>
</html>
CSS:
.button-container {
position: relative;
display: inline-block;
}
.hover-button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.popup {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 5px;
z-index: 1;
}
.button-container:hover .popup {
display: block;
}
