CODEWITHSUNDEEP
jqueryhtmlcss
Maximus Dredoff
Maximus Dredoff

Reputation: 306

Overlay with img on hover?

What is the best way to create overlay with img on hover? I use framework foundation in the project. I've tried this code, but it doesn't work very well:

Here is my code: http://jsfiddle.net/fLsu5jzk/

<div class="other_services">
    <div class="small-12 medium-3 large-3 columns">
        <div class="image-box">
            <img src="http://s8.postimg.org/ithka8iv9/cleaning_of_shopping_centers.png" alt="">
        </div>
        <div>some text here</div>
        <img src="http://s22.postimg.org/u877u6rlp/icon_shop.png" alt="" class="icon-hidden">
    </div>
</div>

.other_services {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}
.other_services img {
    max-height: 117px;
    max-width:200px;
}
.image-box {
    position:relative;

}
.image-box img {
    width:100%;
    vertical-align:top;
}
.image-box:after {
    content:'\A';
    position:absolute;
    width:24%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image-box:hover:after {
    opacity:1;
}
.image-box:hover + .icon-hidden{
    display: block;
}
.other_services .icon-hidden {
    position: absolute;
    z-index: 200;
    max-width: 133px;
    margin: -40% 0 0 24%;
    display: none;
}

Any thoughts?

Upvotes: 1

Views: 251

Answers (1)

Steyn
Steyn

Reputation: 1321

"The best way" is opinion based. See, I don't know if this would be the best way, but this sure would be a great way!

I also made a centered class based on the flexbox property to align the text and icon both horizontally and vertically.

I also object-fit: cover; This makes sure it always shows the image in proportion. I'm pretty sure if you'd use it like this, it would work perfectly!

.other_services {
    font-size: 14px;
    font-family:'Open Sans', sans-serif;
    color:#fff;
}

.img-wrapper {
    position: relative;
}

    .img-wrapper > img {
        width: 100%;
        object-fit: cover;
    }

    .img-wrapper-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.6);
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        opacity: 0;
    }

    .img-wrapper:hover .img-wrapper-overlay {
        opacity: 1;
    }

.centered {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}
<div class="other_services">
    <div class="small-12 medium-3 large-3 columns">
        <div class="img-wrapper">
            <img src="http://s8.postimg.org/ithka8iv9/cleaning_of_shopping_centers.png">
            <div class="img-wrapper-overlay centered">
                <p>Some text</p>
                <img src="http://s22.postimg.org/u877u6rlp/icon_shop.png"/>
            </div>
        </div>
    </div>
</div>

In my example the image is filled to 100% of the page, but when added to your already foundation based code, it would result in a 33.3% wide image (on desktop), which would be perfect in your case.

Upvotes: 1

Related Questions