HTML


<section id="denim" class="clear text-center">
    <div class="denim-item column-3 padding-40">
        <div class="background"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/waldemar-brandt-UP9DtTjRYpI-unsplash.jpg"/></div>
        <div class="denim-content relative">
            <div class="denim-button">
                <button class="button color-2-bg"><i class="fas fa-search"></i></button>
                <button class="button color-1-bg"><i class="fas fa-info"></i></button>
            </div>
            <div class="denim-text">
                <h3>FINEST DENIM</h3>
                <div class="denim-explain color-3">Ultra strength, maximum comfort</div>
            </div>
        </div>
    </div>
    <div class="denim-item column-3 padding-40">
        <div class="background"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mnz-m1m2EZOZVwA-unsplash.jpg"/></div>
        <div class="denim-content relative">
            <div class="denim-button">
                <button class="button color-2-bg"><i class="fas fa-search"></i></button>
                <button class="button color-1-bg"><i class="fas fa-info"></i></button>
            </div>
            <div class="denim-text">
                <h3>FINEST DENIM</h3>
                <div class="denim-explain color-3">Ultra strength, maximum comfort</div>
            </div>
        </div>
    </div>
    <div class="denim-item column-3 padding-40">
        <div class="background"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/waldemar-brandt-UP9DtTjRYpI-unsplash.jpg"/></div>
        <div class="denim-content relative">
            <div class="denim-button">
                <button class="button color-2-bg"><i class="fas fa-search"></i></button>
                <button class="button color-1-bg"><i class="fas fa-info"></i></button>
            </div>
            <div class="denim-text">
                <h3>FINEST DENIM</h3>
                <div class="denim-explain color-3">Ultra strength, maximum comfort</div>
            </div>
        </div>
    </div>
    <div class="denim-item column-3 padding-40">
        <div class="background"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mnz-m1m2EZOZVwA-unsplash.jpg"/></div>
        <div class="denim-content relative">
            <div class="denim-button">
                <button class="button color-2-bg"><i class="fas fa-search"></i></button>
                <button class="button color-1-bg"><i class="fas fa-info"></i></button>
            </div>
            <div class="denim-text">
                <h3>FINEST DENIM</h3>
                <div class="denim-explain color-3">Ultra strength, maximum comfort</div>
            </div>
        </div>
    </div>
    <div class="denim-item column-3 padding-40">
        <div class="background"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/waldemar-brandt-UP9DtTjRYpI-unsplash.jpg"/></div>
        <div class="denim-content relative">
            <div class="denim-button">
                <button class="button color-2-bg"><i class="fas fa-search"></i></button>
                <button class="button color-1-bg"><i class="fas fa-info"></i></button>
            </div>
            <div class="denim-text">
                <h3>FINEST DENIM</h3>
                <div class="denim-explain color-3">Ultra strength, maximum comfort</div>
            </div>
        </div>
    </div>
    <div class="denim-item column-3 padding-40">
        <div class="background"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mnz-m1m2EZOZVwA-unsplash.jpg"/></div>
        <div class="denim-content relative">
            <div class="denim-button">
                <button class="button color-2-bg"><i class="fas fa-search"></i></button>
                <button class="button color-1-bg"><i class="fas fa-info"></i></button>
            </div>
            <div class="denim-text">
                <h3>FINEST DENIM</h3>
                <div class="denim-explain color-3">Ultra strength, maximum comfort</div>
            </div>
        </div>
    </div>
    <div class="denim-item column-3 padding-40">
        <div class="background"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/waldemar-brandt-UP9DtTjRYpI-unsplash.jpg"/></div>
        <div class="denim-content relative">
            <div class="denim-button">
                <button class="button color-2-bg"><i class="fas fa-search"></i></button>
                <button class="button color-1-bg"><i class="fas fa-info"></i></button>
            </div>
            <div class="denim-text">
                <h3>FINEST DENIM</h3>
                <div class="denim-explain color-3">Ultra strength, maximum comfort</div>
            </div>
        </div>
    </div>
    <div class="denim-item column-3 padding-40">
        <div class="background"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mnz-m1m2EZOZVwA-unsplash.jpg"/></div>
        <div class="denim-content relative">
            <div class="denim-button">
                <button class="button color-2-bg"><i class="fas fa-search"></i></button>
                <button class="button color-1-bg"><i class="fas fa-info"></i></button>
            </div>
            <div class="denim-text">
                <h3>FINEST DENIM</h3>
                <div class="denim-explain color-3">Ultra strength, maximum comfort</div>
            </div>
        </div>
    </div>
</section>

<div id="credit" class="text-center">
    <div>Created with <a href="https://web.imasmi.com/webcss" target="blank">WebCss</a></div>
    <div>Created with <a href="https://fontawesome.com/" target="blank">Font Awesome</a></div>
    <div>Photo by <a href="https://unsplash.com/@waldemarbrandt67w?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Waldemar Brandt</a> on <a href="https://unsplash.com/s/photos/denim?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
    <div>Photo by <a href="https://unsplash.com/@mnzoutfits?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mnz</a> on <a href="https://unsplash.com/s/photos/denim?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
</div>

CSS


body{font-family: helvetica, sans-serif;}
.color-1{color: #ffffff;}
.color-1-bg{background-color: #ffffff; color: #000000;}
.color-2, .denim-text h3{color: #29a1b3;}
.color-2-bg{background-color: #29a1b3;}
.denim-item{height: 250px; overflow: hidden;}
.denim-item:hover .background, .denim-item:active .background{filter: brightness(0.2);}
.denim-button{position: relative; top: -200px; transition: 0.4s ease-out;}
.denim-text{position: relative; top: 400px; transition: 0.6s ease-out;}
.denim-item:hover .denim-text, .denim-item:active .denim-text, .denim-item:hover .denim-button, .denim-item:active .denim-button{top: 0;}
.denim-item h3{letter-spacing: 5px;}
.denim-explain{color: #ffffff; font-size: 0.8em; letter-spacing: 1px;}
.button{outline: none; border: unset; padding: 13px 0; width: 40px; font-size: 0.8em; display: inline-block; margin: 20px auto; cursor: pointer; transition: 0.5s;}
.button:hover, .button:active{background-color: #528f8b; color: #ffffff;}
#credit a{color: #29a1b3; text-decoration: none;}
@media (max-width: 1080px){
}

JavaScript


Imasmi web loading