<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Slide on Hover</title>
<link href=
rel="stylesheet"/>
<style>
/* For adding effects */
.image-container:hover img {
transform: translateX(-100%);
}
.image-container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body class="bg-gray-100 py-10 flex
justify-center items-center">
<div class="text-center">
<h1 class="text-3xl font-bold mb-4">
Image Slide on Hover
</h1>
<div class="image-container relative w-96
h-60 overflow-hidden rounded-lg">
<img alt="Image Slide" src=
class="w-full h-full object-cover
transition-transform
duration-500 ease-in-out"/>
<div class="overlay transition-opacity
duration-500 ease-in-out
absolute top-0 left-0 w-full
h-full bg-black bg-opacity-50
flex justify-center items-center
opacity-0 text-white">
<p class="text-xl">
Additional Content Here
</p>
</div>
</div>
</div>
</body>
</html>