Hover Effect with Overlay

January 7, 2025 · AI Conversations

User

on hover show description with blue overlay over image and change arrow to a button and show as a slide down

Assistant

To implement this hover effect in HTML and CSS, follow these steps:

1. **HTML Structure**: Set up a container for the image and description. Include the title, image, description, and arrow/button.

2. **CSS for Overlay Effect**:
– Use `position: absolute` for the overlay.
– On hover, make the overlay visible with a blue background and slide down the description.
– Change the arrow to a button with a smooth transition.

Here’s the code:

<div class="card">
  <div class="card-header">
    <span>Projektierung</span>
    <div class="arrow">→</div>
  </div>
  <div class="card-image">
    <img src="solar-panel.jpg" alt="Solar Panel Project">
    <div class="overlay">
      <p>Detailed description about the project goes here.</p>
      <button class="more-info">Learn More</button>
    </div>
  </div>
</div>

/* Card styles */
.card {
  position: relative;
  width: 300px;
  overflow: hidden;
  border-radius: 10px;
  font-family: Arial, sans-serif;
}

/* Header styles */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #4a54ff;
  color: white;
  padding: 10px 15px;
  font-size: 16px;
}

.card-header .arrow {
  font-size: 20px;
  transition: transform 0.3s;
}

/* Image container */
.card-image {
  position: relative;
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 0 10px 10px;
}

/* Overlay effect */
.card-image .overlay {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: rgba(74, 84, 255, 0.8);
  color: white;
  padding: 20px;
  text-align: center;
  transition: top 0.3s;
}

.card-image .overlay p {
  margin: 0;
}

.card-image .overlay button {
  margin-top: 10px;
  padding: 10px 20px;
  border: none;
  background-color: white;
  color: #4a54ff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.card-image .overlay button:hover {
  background-color: #e0e0ff;
}

/* Hover effect */
.card:hover .card-image .overlay {
  top: 0;
}

.card:hover .card-header .arrow {
  transform: rotate(90deg);
}

### Key Features:
1. **Overlay Slide Down**:
– The `.overlay` slides from `top: 100%` to `top: 0` on hover.

2. **Arrow to Button**:
– The arrow rotates on hover, giving a visual cue of interaction.
– The button appears in the `.overlay`.

3. **Responsive Design**:
– You can adjust `width`, `font-size`, or padding for mobile devices using media queries.

Let me know if you'd like this further customized!

Hover Effect with Overlay

Leave a Comment Cancel