CSS Hover Effects Adjustment

January 7, 2025 · AI Conversations

User
.project-taxonomy-grid {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;

}
.project-grid .taxonomy-icon {
position: relative;
display: inline-block;
width: auto;
border-radius: 5.25px;
}

.project-taxonomy-grid .project-grid {
flex: 1 1 30%;
position: relative;
overflow: hidden;
}
.project-taxonomy-grid .project-grid img {
width: 100%;
height: 229px; /* Set a fixed height for the images to make them equal */
object-fit: cover; /* Ensures the image covers the area without distortion */
}
.project-taxonomy-grid .project-grid .term-description
{
background-color: #225BC0;
padding: 10px 16px;
color:#fff;
font-family: 'Archia-medium', sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.project-taxonomy-grid .project-grid .term-description .taxonomy-icon
{
padding:12.6px;
background-color:#fff;
}
.project-taxonomy-grid .project-grid .term-description .taxonomy-icon img
{
width:16.8px;
height:16.8px;
}
/* Hover Effects */

.project-grid .taxonomy-icon .icon {
display: inline-block;
transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth slide and fade */
transform: translateX(0); /* Default position */
opacity: 1; /* Fully visible by default */
}

.project-grid .taxonomy-icon .button-name {
display: inline-block;
position: absolute;
font-size:16px;
left: 100%; /* Start off-screen to the right */
white-space: nowrap;
opacity: 0; /* Initially invisible */
transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth slide and fade */
color:#225BC0;
}
.project-grid:hover .taxonomy-icon {
min-width: 150px;
}
.project-grid:hover .taxonomy-icon .icon {
transform: translateX(-100%); /* Slide the arrow out of view */
opacity: 0; /* Fade out */
}

.project-grid:hover .taxonomy-icon .button-name {
transform: translateX(-100%); /* Slide "More info" into view */
opacity: 1; /* Fade in */
}
.project-grid .taxonomy-icon .button-name {
width: 100%; /* Ensure full width for text alignment */
text-align: center; /* Center-align the text */
line-height: 1.5; /* Optional: Adjust line height for better readability */
}
.project-taxonomy-grid .project-grid .description
{
font-family: 'Archia-medium', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
color:#fff;
padding:36px 20px;
background-color: #225BC0;
position: absolute;
bottom:0px;
opacity:0.89;
}
display project description on hover project grid

Assistant
To display the project description on hover for the project grid, you can make a few adjustments to your CSS. The goal is to initially hide the project description and then display it when the user hovers over the `.project-grid`. Here’s how you can achieve that:

### Updated CSS

.project-taxonomy-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.project-taxonomy-grid .project-grid {
    flex: 1 1 30%;
    position: relative;
    overflow: hidden;
}

.project-taxonomy-grid .project-grid img {
    width: 100%;
    height: 229px; /* Set a fixed height for the images to make them equal */
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

.project-taxonomy-grid .project-grid .term-description {
    background-color: #225BC0;
    padding: 10px 16px;
    color: #fff;
    font-family: 'Archia-medium', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.project-taxonomy-grid .project-grid .term-description .taxonomy-icon {
    padding: 12.6px;
    background-color: #fff;
}

.project-taxonomy-grid .project-grid .term-description .taxonomy-icon img {
    width: 16.8px;
    height: 16.8px;
}

/* Hover Effects */
.project-grid:hover .description {
    opacity: 1; /* Show the description on hover */
    transition: opacity 0.3s ease; /* Smooth fade in */
}

.project-grid .description {
    font-family: 'Archia-medium', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    padding: 36px 20px;
    background-color: #225BC0;
    position: absolute;
    bottom: 0px;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth fade out */
}

.project-grid .taxonomy-icon {
    position: relative;
    display: inline-block;
    width: auto;
    border-radius: 5.25px;
}

.project-grid .taxonomy-icon .icon {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth slide and fade */
    transform: translateX(0); /* Default position */
    opacity: 1; /* Fully visible by default */
}

.project-grid .taxonomy-icon .button-name {
    display: inline-block;
    position: absolute;
    font-size: 16px;
    left: 100%; /* Start off-screen to the right */
    white-space: nowrap;
    opacity: 0; /* Initially invisible */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth slide and fade */
    color: #225BC0;
}

.project-grid:hover .taxonomy-icon {
    min-width: 150px;
}

.project-grid:hover .taxonomy-icon .icon {
    transform: translateX(-100%); /* Slide the arrow out of view */
    opacity: 0; /* Fade out */
}

.project-grid:hover .taxonomy-icon .button-name {
    transform: translateX(-100%); /* Slide "More info" into view */
    opacity: 1; /* Fade in */
}

.project-grid .taxonomy-icon .button-name {
    width: 100%; /* Ensure full width for text alignment */
    text-align: center; /* Center-align the text */
    line-height: 1.5; /* Optional: Adjust line height for better readability */
}

### Key Changes

1. **Added Hover Effect for Description**: The description is initially hidden (`opacity: 0`). On hover of the `.project-grid`, its opacity transitions to `1`, making it visible.
2. **Transition**: The transition for opacity is smoothened with a `0.3s` ease, providing a nice fade effect when the user hovers over the project grid.

### HTML Structure (Example)

Make sure that your HTML structure aligns with the styles:

<div class="project-taxonomy-grid">
    <div class="project-grid">
        <img src="path/to/image.jpg" alt="Project Image">
        <div class="term-description">
            <div class="taxonomy-icon">
                <img src="path/to/icon.png" alt="Icon" class="icon">
                <span class="button-name">More Info</span>
            </div>
        </div>
        <div class="description">
            This is the project description that will be shown on hover.
        </div>
    </div>
    <!-- Repeat for more project grids -->
</div>

With these changes, the project description should now display on hover, providing a better user experience!

User
Assistant
Based on the provided HTML template, it looks like you have a structure for displaying project information, including the term name, an icon with a "More Info" button, and an image with a description. To ensure that the description is shown only on hover over the project grid, you can make a few adjustments to your HTML and CSS.

### Adjusted HTML Template

Here’s an updated version of your HTML template that incorporates the necessary classes to align with the hover functionality:

<div class="project-grid">
    <div class="term-description">
        <div><?php echo $term->name; ?></div>
        <div class="taxonomy-icon">
            <a href="<?php echo esc_url($term_link); ?>" class="icon-container">
                <img src="<?php echo get_stylesheet_directory_uri(); ?>/icons/Shape.svg" class="icon" />
                <span class="button-name"><?php echo __('Mehr erfahren', 'solaron'); ?></span>
            </a>
        </div>
    </div>
    <div class="img-box">
        <img src="<?php echo $image; ?>" alt="Project Image" />
        <div class="description"><?php echo $description; ?></div>
    </div>
</div>

### CSS Adjustments

Make sure your CSS aligns with this structure to ensure the description appears on hover:

.project-grid {
    position: relative; /* Ensure this is set for absolute positioning of the description */
}

.img-box {
    position: relative; /* Position relative to allow absolute children */
}

.description {
    font-family: 'Archia-medium', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    padding: 36px 20px;
    background-color: #225BC0;
    position: absolute;
    bottom: 0; /* Position at the bottom of the image */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth fade in/out */
}

/* Show the description on hover */
.project-grid:hover .description {
    opacity: 1; /* Make the description visible on hover */
}

### Key Points

1. **HTML Structure**: The description is placed within the `.img-box` div, which makes it easy to control its visibility based on the hover state of the `.project-grid`.
2. **CSS Hover Effect**: The description's opacity is set to `0` initially, and it transitions to `1` when the user hovers over the `.project-grid`, ensuring it only appears during hover.

With these adjustments, the description should now display correctly when the user hovers over each project grid item, enhancing the user experience by keeping the interface clean while providing additional information when needed.

User
also grow image on hover under width
Assistant
To make the image grow (scale) on hover while ensuring it fits nicely within its container, you can add a CSS transformation effect. This involves using the `transform` property to scale the image up when the user hovers over the `.project-grid`.

### Updated CSS for Image Scaling

Here's how you can modify the CSS to achieve the image scaling effect on hover:

.project-grid {
    position: relative; /* Ensure this is set for absolute positioning of the description */
    overflow: hidden; /* Prevent overflow of scaled image */
}

.img-box {
    position: relative; /* Position relative to allow absolute children */
    overflow: hidden; /* Ensure that any scaling does not affect layout */
}

.img-box img {
    width: 100%; /* Ensure the image fills the container */
    height: 229px; /* Set a fixed height for consistency */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

/* Scale the image on hover */
.project-grid:hover .img-box img {
    transform: scale(1.1); /* Scale the image to 110% */
}

.description {
    font-family: 'Archia-medium', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    padding: 36px 20px;
    background-color: #225BC0;
    position: absolute;
    bottom: 0; /* Position at the bottom of the image */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth fade in/out */
}

/* Show the description on hover */
.project-grid:hover .description {
    opacity: 1; /* Make the description visible on hover */
}

### Key Changes

1. **Overflow Hidden**: The `.project-grid` and `.img-box` containers have `overflow: hidden;` to prevent the scaled image from overflowing its boundaries.
2. **Image Transition**: The image inside the `.img-box` has a `transition` on the `transform` property, allowing it to scale smoothly.
3. **Scale Effect**: When hovering over the `.project-grid`, the image scales to 110% of its original size (`scale(1.1)`).

### Result

With these adjustments, when a user hovers over a project grid item, the image will scale up slightly, and the project description will fade in, providing a visually appealing effect that draws attention to the project details.

Leave a Comment

Your email address will not be published. Required fields are marked *