Hover Effect Button Name

January 7, 2025 · AI Conversations

User
Assistant
To change the arrow to the button name when hovering over the `.project-grid` div, you can use a combination of HTML, CSS, and JavaScript. Here's how you can implement this:

### Updated HTML
Add a `data-button-name` attribute to hold the button name dynamically.

<div class="project-grid" data-button-name="<?php echo $term->name ?>">
    <div class="term-description">
        <div><?php echo $term->name ?></div>
        <div class="taxonomy-icon">
            <a href="<?php echo esc_url($term_link)?>">    
                <img src="<?php echo get_stylesheet_directory_uri() ?>/icons/Shape.svg" class="icon" />
            </a>
        </div>
    </div>
    <div class="img-box">
        <img src="<?php echo $image ?>" />
        <div class="description"><?php echo $description ?></div>
    </div>
</div>

### CSS
Use CSS to style the hover effect and replace the icon with the button name.

.project-grid .taxonomy-icon {
    position: relative;
}

.project-grid .taxonomy-icon .icon {
    transition: opacity 0.3s ease;
}

.project-grid:hover .taxonomy-icon .icon {
    opacity: 0;
}

.project-grid:hover .taxonomy-icon::after {
    content: attr(data-button-name);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #333; /* Adjust the text color */
    background: #fff; /* Optional: Add background for better visibility */
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

### Explanation
1. **HTML Changes**:
– A `data-button-name` attribute is added to the `.project-grid` div to dynamically hold the button name (e.g., the term's name).

2. **CSS Changes**:
– The `.icon` image inside `.taxonomy-icon` fades out on hover using `opacity`.
– A `::after` pseudo-element displays the button name, using the `content` property to fetch the value from `data-button-name`.

3. **Hover Effect**:
– When hovering over `.project-grid`, the `.icon` fades out, and the `::after` pseudo-element with the button name appears in its place.

### Optional JavaScript
If you need more dynamic control or to handle complex scenarios, you can use JavaScript or jQuery.

document.querySelectorAll('.project-grid').forEach(grid => {
    grid.addEventListener('mouseover', function() {
        const icon = this.querySelector('.icon');
        icon.style.opacity = '0';
        const buttonName = this.dataset.buttonName;
        const afterElement = document.createElement('span');
        afterElement.className = 'button-name';
        afterElement.innerText = buttonName;
        icon.parentNode.appendChild(afterElement);
    });

    grid.addEventListener('mouseout', function() {
        const icon = this.querySelector('.icon');
        icon.style.opacity = '1';
        const afterElement = this.querySelector('.button-name');
        if (afterElement) {
            afterElement.remove();
        }
    });
});

This solution dynamically handles hover events and ensures a clean and user-friendly UI.

User
show like slide down to left
Assistant
To implement a slide-down-to-left effect when hovering over the `.project-grid` div and replacing the icon with the button name, you can use CSS animations. Here's how you can achieve this:

—

### Updated HTML
No significant changes to the HTML are needed.

<div class="project-grid" data-button-name="<?php echo $term->name ?>">
    <div class="term-description">
        <div><?php echo $term->name ?></div>
        <div class="taxonomy-icon">
            <a href="<?php echo esc_url($term_link)?>">    
                <img src="<?php echo get_stylesheet_directory_uri() ?>/icons/Shape.svg" class="icon" />
            </a>
        </div>
    </div>
    <div class="img-box">
        <img src="<?php echo $image ?>" />
        <div class="description"><?php echo $description ?></div>
    </div>
</div>

—

### CSS: Slide-Down-to-Left Effect

.project-grid {
    position: relative;
    overflow: hidden; /* Ensure content stays within the div */
}

.project-grid .taxonomy-icon {
    position: relative;
    height: 40px; /* Adjust based on your design */
    width: 40px; /* Adjust based on your design */
}

.project-grid .taxonomy-icon .icon {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.project-grid:hover .taxonomy-icon .icon {
    transform: translate(-100%, 100%); /* Slide the icon down to the left */
    opacity: 0;
}

.project-grid .taxonomy-icon .button-name {
    position: absolute;
    top: -100%;
    left: 0;
    transform: translate(0, 0);
    width: 100%; /* Ensure it fits within the parent */
    text-align: center;
    font-size: 14px;
    color: #333; /* Adjust the text color */
    background: #fff; /* Optional: Add background for better visibility */
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.project-grid:hover .taxonomy-icon .button-name {
    transform: translate(0, 100%); /* Slide the text down into view */
    opacity: 1;
}

—

### Explanation
1. **Icon Transition**:
– The `.icon` slides diagonally down to the left (`translate(-100%, 100%)`) when hovering over `.project-grid`.
– Simultaneously, its opacity fades out for a smoother effect.

2. **Button Name Transition**:
– The `.button-name` text is initially positioned above the visible area (`top: -100%`).
– On hover, it slides down into view (`transform: translate(0, 100%)`) and becomes visible (`opacity: 1`).

3. **Smooth Transitions**:
– Both the icon and the button name use the `transition` property for smooth animations.

—

### Optional: Add Dynamic Content with JavaScript
If you want to dynamically create the button name element:

document.querySelectorAll('.project-grid').forEach(grid => {
    const taxonomyIcon = grid.querySelector('.taxonomy-icon');
    const buttonName = document.createElement('div');
    buttonName.className = 'button-name';
    buttonName.innerText = grid.dataset.buttonName;
    taxonomyIcon.appendChild(buttonName);
});

This dynamically appends the `.button-name` element with the text from `data-button-name`.

—

This approach ensures a visually engaging slide-down-to-left effect for the hover interaction!

User
don't use any kind of js
Assistant
If you prefer not to use JavaScript, you can achieve the slide-down-to-left effect entirely with CSS. Here's the updated solution:

—

### Updated HTML
Ensure your HTML structure remains simple and doesn't rely on dynamic content insertion:

<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)?>">    
                <img src="<?php echo get_stylesheet_directory_uri() ?>/icons/Shape.svg" class="icon" />
                <span class="button-name"><?php echo $term->name ?></span>
            </a>
        </div>
    </div>
    <div class="img-box">
        <img src="<?php echo $image ?>" />
        <div class="description"><?php echo $description ?></div>
    </div>
</div>

—

### CSS: Slide-Down-to-Left Effect

.project-grid {
    position: relative;
    overflow: hidden; /* Prevent content overflow */
}

.project-grid .taxonomy-icon {
    position: relative;
    width: 40px; /* Adjust to match your icon size */
    height: 40px; /* Adjust to match your icon size */
}

.project-grid .taxonomy-icon .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth sliding and fading */
}

.project-grid:hover .taxonomy-icon .icon {
    transform: translate(-100%, 100%); /* Slide the icon down to the left */
    opacity: 0; /* Fade out the icon */
}

.project-grid .taxonomy-icon .button-name {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(0, -100%); /* Initially hide above the element */
    opacity: 0; /* Initially invisible */
    background-color: #fff; /* Optional: Background for better visibility */
    color: #333; /* Text color */
    font-size: 14px; /* Adjust font size */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth sliding and fading */
}

.project-grid:hover .taxonomy-icon .button-name {
    transform: translate(0, 0); /* Slide into view */
    opacity: 1; /* Fade in */
}

—

### How It Works
1. **Icon Styling**:
– The `.icon` is visible by default and fades/slides out (`translate(-100%, 100%)`) on hover.

2. **Button Name Styling**:
– The `.button-name` text is initially hidden (`translate(0, -100%)` and `opacity: 0`).
– On hover, it slides down into view (`transform: translate(0, 0)`) and becomes visible (`opacity: 1`).

3. **Smooth Transitions**:
– Both elements have transitions applied to `transform` and `opacity`, ensuring a smooth effect.

—

### No JavaScript Needed
This solution works entirely with CSS, leveraging the hover state to switch between the icon and the button name. It is clean, efficient, and fully responsive.

User
just change arrow to button name "More info" and slide left
Assistant
To achieve the desired effect of replacing the arrow with the text "More info" and making it slide left, here's how you can do it using pure CSS:

—

### HTML
Ensure the structure has a container for the arrow icon and the button name text.

<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">
                <span class="icon">→</span> <!-- Arrow Icon -->
                <span class="button-name">More info</span> <!-- Button Name -->
            </a>
        </div>
    </div>
    <div class="img-box">
        <img src="<?php echo $image ?>" />
        <div class="description"><?php echo $description ?></div>
    </div>
</div>

—

### CSS

.project-grid {
    position: relative;
    overflow: hidden; /* Prevent overflow */
}

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

.project-grid .taxonomy-icon .icon-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    overflow: hidden;
}

.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;
    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 */
}

.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 */
}

—

### Explanation
1. **Default State**:
– The `.icon` (arrow) is visible by default, positioned at `translateX(0)` with `opacity: 1`.
– The `.button-name` ("More info") is positioned off-screen to the right (`left: 100%`) and invisible (`opacity: 0`).

2. **Hover State**:
– When hovering over `.project-grid`, the arrow (`.icon`) slides to the left (`translateX(-100%)`) and fades out (`opacity: 0`).
– Simultaneously, the text (`.button-name`) slides in from the right (`translateX(-100%)`) and becomes visible (`opacity: 1`).

3. **Smooth Transitions**:
– The `transition` property ensures a smooth animation for both `transform` and `opacity`.

—

This solution uses only CSS and creates a clean, visually appealing effect. The hover interaction transitions the arrow to the text "More info" sliding from right to left.

User
also increase button box width also as per text on hover
Assistant
To increase the button box width dynamically as per the text content on hover, you can use CSS with a combination of `inline-block` elements and `transition` properties. Here's how:

—

### Updated HTML
No changes are needed in the HTML structure.

<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">
                <span class="icon">→</span> <!-- Arrow Icon -->
                <span class="button-name">More info</span> <!-- Button Name -->
            </a>
        </div>
    </div>
    <div class="img-box">
        <img src="<?php echo $image ?>" />
        <div class="description"><?php echo $description ?></div>
    </div>
</div>

—

### CSS

.project-grid {
    position: relative;
    overflow: hidden; /* Prevent overflow */
}

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

.project-grid .taxonomy-icon .icon-container {
    position: relative;
    display: inline-block;
    width: auto;
    overflow: hidden;
    padding: 5px 10px; /* Initial padding for the container */
    border: 1px solid #ccc; /* Optional: Add a border for better visuals */
    border-radius: 5px; /* Optional: Rounded corners */
    background-color: #f9f9f9; /* Optional: Background color */
    transition: width 0.3s ease; /* Smooth width transition */
    white-space: nowrap; /* Prevent text wrapping */
}

.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: relative;
    opacity: 0; /* Initially invisible */
    margin-left: 10px; /* Add space between icon and text */
    transition: opacity 0.3s ease; /* Smooth fade-in effect */
}

/* Hover Effects */
.project-grid:hover .taxonomy-icon .icon-container {
    width: auto; /* Adjust to fit the content of the text */
}

.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 {
    opacity: 1; /* Fade in */
}

—

### Key Features
1. **Dynamic Width on Hover**:
– The `.icon-container` expands its width dynamically to fit the text ("More info") when hovered.

2. **Arrow and Text Transition**:
– The `.icon` slides and fades out on hover.
– The `.button-name` fades in smoothly with `opacity`.

3. **Smooth Width Transition**:
– The `transition: width 0.3s ease` on `.icon-container` ensures the width adjustment is smooth.

4. **No Wrapping**:
– `white-space: nowrap` ensures the text does not wrap to multiple lines.

—

### Result
When you hover over the `.project-grid`, the arrow (`.icon`) slides out to the left, the text ("More info") slides in and becomes visible, and the box width adjusts smoothly to accommodate the text.

This approach is clean, dynamic, and purely CSS-based!

User
width of taxonomy-icon not increasing
Assistant
To ensure the width of the `.taxonomy-icon` increases dynamically as per the text content when hovering, we can make a slight adjustment to the CSS. Instead of relying on the container's automatic adjustment, we explicitly define a default width for the `.taxonomy-icon` and adjust it on hover using the `min-width` property.

Here’s the updated solution:

—

### Updated CSS

.project-grid {
    position: relative;
    overflow: hidden; /* Prevent overflow */
}

.project-grid .taxonomy-icon {
    position: relative;
    display: inline-block;
    width: 40px; /* Default width for the arrow */
    transition: width 0.3s ease; /* Smooth transition for width */
    overflow: hidden; /* Hide overflowing content */
    white-space: nowrap; /* Prevent text wrapping */
    padding: 5px 10px; /* Optional: Add some padding */
    border: 1px solid #ccc; /* Optional: Border for better visuals */
    border-radius: 5px; /* Optional: Rounded corners */
    background-color: #f9f9f9; /* Optional: Background color */
}

.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;
    opacity: 0; /* Initially invisible */
    margin-left: 10px; /* Space between the icon and the text */
    transition: opacity 0.3s ease; /* Smooth fade-in effect */
}

/* Hover Effects */
.project-grid:hover .taxonomy-icon {
    width: 120px; /* Expand the width to fit the text */
}

.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 {
    opacity: 1; /* Fade in */
}

—

### Explanation of Changes

1. **Fixed Width for `.taxonomy-icon`**:
– Added `width: 40px` as the default width, enough to fit the arrow.

2. **Dynamic Width on Hover**:
– On hover, the width is increased to `120px` to fit the text. You can adjust this value to match your actual text content.

3. **Smooth Transition**:
– The `transition: width 0.3s ease` ensures the width adjustment is smooth.

4. **Icon and Text Animation**:
– The `.icon` slides and fades out, and `.button-name` fades in when hovered.

—

### Result

When hovering over the `.taxonomy-icon`, the box dynamically expands its width to fit the text ("More info") while transitioning smoothly. The arrow slides out of view, and the text appears seamlessly.

If you’d like the width to be fully dynamic (auto-adjusting to text length), we would need to rely on the `min-width` property, but this static width approach ensures better control over the design. Let me know if you prefer a `min-width`-based solution!

User
max-content not working
Assistant
If `max-content` is not working as expected, it could be due to how CSS is interpreting the width in your specific setup. To make the box width adjust dynamically to fit the content, here’s a robust solution using `display: inline-flex` and `auto` widths, which ensures dynamic adjustments without relying on `max-content`.

—

### Updated CSS for Dynamic Width Adjustment

.project-grid {
    position: relative;
    overflow: hidden; /* Prevent overflow */
}

.project-grid .taxonomy-icon {
    display: inline-flex; /* Use flexbox for dynamic sizing */
    align-items: center; /* Align content vertically */
    width: auto; /* Allow dynamic adjustment */
    max-width: 40px; /* Default width (fits arrow initially) */
    transition: max-width 0.3s ease; /* Smooth transition for width */
    overflow: hidden; /* Hide overflowing content */
    padding: 5px 10px; /* Optional: Add padding */
    border: 1px solid #ccc; /* Optional: Add border for visuals */
    border-radius: 5px; /* Optional: Rounded corners */
    background-color: #f9f9f9; /* Optional: Background color */
    white-space: nowrap; /* Prevent text wrapping */
}

.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;
    opacity: 0; /* Initially invisible */
    margin-left: 10px; /* Space between the icon and text */
    transition: opacity 0.3s ease; /* Smooth fade-in effect */
    visibility: hidden; /* Hide text completely by default */
}

/* Hover Effects */
.project-grid:hover .taxonomy-icon {
    max-width: 200px; /* Expand width dynamically to fit text */
}

.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 {
    opacity: 1; /* Fade in */
    visibility: visible; /* Make text visible */
}

—

### Key Points of the Solution

1. **Dynamic Width with `max-width`**:
– By using `max-width` combined with `auto` and `inline-flex`, the width dynamically adjusts to the content while ensuring smooth transitions.

2. **Flexbox for Content Alignment**:
– `display: inline-flex` ensures the icon and button name align properly, and the container dynamically adjusts to the size of its children.

3. **Smooth Transition**:
– The `transition: max-width 0.3s ease` ensures that the width expands smoothly.

4. **Text Visibility**:
– Initially, the text (`.button-name`) is hidden using `opacity: 0` and `visibility: hidden`. On hover, it becomes visible with a smooth fade-in effect.

5. **Fallback for Dynamic Adjustment**:
– If `max-content` is unreliable in your environment, this method ensures compatibility across browsers.

—

### Result

On hover:
– The width of `.taxonomy-icon` expands dynamically to fit the text content (`More info`).
– The arrow (`.icon`) slides out of view and fades out.
– The text (`.button-name`) appears smoothly.

If this still doesn't resolve your issue, let me know, and I can help troubleshoot further!

User
apply proper text align center under button text
Assistant
To properly center the text under the button and ensure alignment looks correct, you can use `flexbox` or `text-align` in combination with proper spacing and padding. Here's an updated version of the CSS to center the button text visually and functionally:

—

### Updated CSS for Center Alignment

.project-grid {
    position: relative;
    overflow: hidden; /* Prevent overflow */
}

.project-grid .taxonomy-icon {
    display: inline-flex; /* Use flexbox for proper alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    width: auto; /* Allow dynamic adjustment */
    max-width: 40px; /* Default width (fits arrow initially) */
    transition: max-width 0.3s ease; /* Smooth transition for width */
    overflow: hidden; /* Hide overflowing content */
    padding: 10px; /* Add padding for better button spacing */
    border: 1px solid #ccc; /* Optional: Add border for visuals */
    border-radius: 5px; /* Optional: Rounded corners */
    background-color: #f9f9f9; /* Optional: Background color */
    white-space: nowrap; /* Prevent text wrapping */
    text-align: center; /* Center-align text inside the button */
    position: relative; /* Needed for internal positioning */
}

.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;
    opacity: 0; /* Initially invisible */
    margin-left: 10px; /* Space between the icon and text */
    transition: opacity 0.3s ease; /* Smooth fade-in effect */
    visibility: hidden; /* Hide text completely by default */
    text-align: center; /* Center-align the text */
}

/* Hover Effects */
.project-grid:hover .taxonomy-icon {
    max-width: 200px; /* Expand width dynamically to fit text */
}

.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 {
    opacity: 1; /* Fade in */
    visibility: visible; /* Make text visible */
}

/* Add Proper Text Alignment for Button Text */
.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 */
}

—

### Explanation

1. **Centered Text Inside the Button**:
– `text-align: center` ensures the text inside the button is centered.

2. **Dynamic Width Adjustment**:
– `width: 100%` for `.button-name` ensures it takes up the entire space of the `.taxonomy-icon` container.

3. **Flexbox for Centering**:
– `align-items: center` and `justify-content: center` ensure that the icon and text remain vertically and horizontally centered inside `.taxonomy-icon`.

4. **Hover Effects**:
– The `opacity` and `visibility` ensure a smooth transition for the text (`More info`), while the width of the container dynamically adjusts.

—

### Result
– The arrow is centered by default.
– On hover, the container expands, the arrow slides out, and the button text (`More info`) fades in and is perfectly centered under the button.

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;
}

.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:hover .taxonomy-icon .icon-container {
width: auto; /* Adjust to fit the content of the text */
background-color: #fff;
}
.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;
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 */
}
.project-grid:hover .taxonomy-icon {
width: 160px;
}
.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;
}
apply padding:12.6px in button

Assistant
To apply `padding: 12.6px` to the button and ensure the layout remains intact with your hover effect, update the CSS for the `.taxonomy-icon` and `.button-name` styles. Here's the revised code:

—

### Updated CSS

.project-taxonomy-grid .project-grid .term-description .taxonomy-icon {
    padding: 12.6px; /* Apply padding to the taxonomy-icon */
    background-color: #fff;
    display: inline-flex; /* Use flexbox for proper alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    position: relative;
    overflow: hidden; /* Hide overflow for hover effect */
    transition: width 0.3s ease, padding 0.3s ease; /* Smooth transitions */
    width: auto; /* Allow dynamic sizing */
    border-radius: 4px; /* Optional: Rounded corners for better visuals */
}

.project-grid .taxonomy-icon .button-name {
    display: inline-block;
    padding: 12.6px; /* Apply padding to the button text */
    position: absolute;
    left: 100%; /* Start off-screen to the right */
    white-space: nowrap; /* Prevent text wrapping */
    opacity: 0; /* Initially invisible */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth slide and fade */
    background-color: #fff; /* Same background as the button */
    border-radius: 4px; /* Match button corners */
    color: #225BC0; /* Button text color */
    font-size: 16px; /* Adjust text size if necessary */
    font-family: 'Archia-medium', sans-serif;
}

.project-grid:hover .taxonomy-icon {
    width: 160px; /* Expand width on hover */
}

.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 */
}

/* Center alignment and padding */
.project-grid .taxonomy-icon .button-name {
    width: auto; /* Dynamic width based on content */
    text-align: center; /* Center-align the text */
    line-height: 1.5; /* Optional: Adjust line height */
}

—

### Explanation of Changes

1. **Padding on `.taxonomy-icon`**:
– `padding: 12.6px` is applied directly to ensure proper spacing, making it consistent for the hover and normal states.

2. **Button (`.button-name`) Padding**:
– Added `padding: 12.6px` for consistent spacing and alignment.

3. **Flexbox for Alignment**:
– Used `inline-flex` with `justify-content: center` and `align-items: center` for better content centering inside `.taxonomy-icon`.

4. **Smooth Transitions**:
– Added transitions for `padding` and `width` to ensure smooth resizing and hover effects.

5. **Dynamic Width**:
– Set `width: auto` for `.button-name` to ensure it adjusts dynamically to the text content while retaining padding.

6. **Text Styling**:
– Applied text-specific styles (e.g., font, size, color) to match the button design.

—

### Result

– The `taxonomy-icon` button has consistent `padding: 12.6px` in all states.
– On hover, the arrow slides out, the button expands, and the text `More info` appears with proper padding and alignment.

User
now button width not increasing as text
Assistant
To ensure that the button width increases dynamically based on the text content while maintaining proper padding and centering, you need to set the `display` property of the button text to `inline-block` and ensure that the parent container allows it to grow. Here’s an updated version of your CSS to achieve this:

—

### Updated CSS

.project-taxonomy-grid .project-grid .term-description .taxonomy-icon {
    padding: 12.6px; /* Padding for the taxonomy-icon */
    background-color: #fff;
    display: inline-flex; /* Use flexbox for proper alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    position: relative; /* Needed for absolute positioning of the button */
    overflow: hidden; /* Hide overflow for hover effect */
    transition: width 0.3s ease; /* Smooth transition for width */
    width: auto; /* Allow dynamic sizing */
    border-radius: 4px; /* Optional: Rounded corners */
}

.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; /* Ensure it can grow with content */
    padding: 12.6px; /* Padding for the button */
    position: absolute;
    left: 100%; /* Start off-screen to the right */
    white-space: nowrap; /* Prevent text wrapping */
    opacity: 0; /* Initially invisible */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth slide and fade */
    background-color: #fff; /* Same background as the button */
    border-radius: 4px; /* Match button corners */
    color: #225BC0; /* Button text color */
    font-size: 16px; /* Adjust text size if necessary */
    font-family: 'Archia-medium', sans-serif;
}

/* Hover Effects */
.project-grid:hover .taxonomy-icon {
    width: auto; /* Allow dynamic width based on content */
}

.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 */
}

/* Ensure the button grows with text */
.project-taxonomy-grid .project-grid .taxonomy-icon .button-name {
    width: auto; /* Dynamic width based on content */
    text-align: center; /* Center-align the text */
    line-height: 1.5; /* Optional: Adjust line height for better readability */
    padding: 12.6px; /* Ensure padding remains consistent */
}

—

### Key Adjustments

1. **Dynamic Width for Button**:
– Set `width: auto` for the `.button-name` class to allow it to grow based on its content.

2. **Flexbox Alignment**:
– Retained `display: inline-flex` for `.taxonomy-icon` to ensure that the button text can center properly alongside the icon.

3. **Absolute Positioning**:
– Used `position: absolute` for `.button-name` to keep it off-screen initially but still allow it to expand when the `.taxonomy-icon` width increases.

4. **Transitions**:
– Kept smooth transitions for both the button and icon to ensure a visually appealing effect on hover.

5. **Padding Consistency**:
– Maintained padding for the button text to ensure it visually matches the design.

—

### Result

– When you hover over the `.project-grid`, the button's width will dynamically increase to accommodate the text "More info" with the applied padding, and the text will be centered beneath the button.
– The arrow will slide out smoothly, while the button text fades in, maintaining a cohesive and responsive design.

Leave a Comment

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