Image Box with Expandable Icon Hover Effect

User interaction is key to web design. One such element is the Image Box with Expandable Icon Hover Effect, which shows content in a dynamic way while keeping it clean and simple. This tutorial will show you how to do it with HTML and CSS.

Why an Expandable Icon Hover Effect?

• UX: Encourages user to engage.
• Design: Adds a modern touch to image content.
• SEO: Improves on-page experience, reduces bounce rate.

How it works

The effect is achieved by overlaying an expandable icon on an image inside a box. When you hover over it, the icon expands and shows a “Read More” text, inviting you to click further.

HTML Structure

<div class="sf-imagebox">
    <h3 class="heading">Faucibus sodales</h3>
    <a class="image-wrapper" href="#">
        <img src="images/image.jpg" alt="" />
        <div class="trigger">
            <span class="trigger-text">Read more</span>
            <span class="trigger-icon">+</span>
        </div>
    </a>
    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Vivamus ultricies tortor at aliquet quisque duis nostra. Ultricies vulputate.</p>
</div>

CSS Styling:

/* --------------------- */
/*  Snippflow Image Box  */
/* --------------------- */

.sf-imagebox {

    > *:not(:last-child) {
        margin-bottom: 20px;
    }

    .heading {
        font-size: 24px;
        color: #304050;
    }

    .image-wrapper {
        display: block; 
        position: relative;
        border-radius: 12px;
        overflow: hidden; 
        line-height: 0;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .trigger {
        display: inline-flex; 
        align-items: center; 
        position: absolute; 
        right: 20px; 
        bottom: 20px; 
        padding: 6px;
        line-height: 1; 
        background-color: #24A47B; 
        color: #fff; 
        border-radius: 40px;
        font-weight: 500;
        text-align: center;

        .trigger-text { 
            overflow: hidden; 
            width: 0;
            white-space: nowrap;
            transition: width 0.3s ease-in-out;
        }
        .trigger-icon { 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            width: 40px; 
            height: 40px; 
            font-size: 18px; 
            border-radius: 100%; 
            background-color: rgba(255,255,255,.1);
            transition: all 0.3s ease-in-out;
        }
    }

    &:hover {
        .trigger {
            .trigger-text { width: 110px; }
            .trigger-icon { transform: rotate(360deg); }
        }
    }
    
}

Result

See the Pen Image Box with Expandable Icon Hover Effect by Snippflow (@snippflow) on CodePen.

See also