JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="parent">
    <div class="child">
        <img src="https://placeimg.com/640/480/any">
    </div>
    <div class="child-hover">
        <button>Text</button>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.parent {
    max-width: 300px;
    position: relative;
}

.child {
    transition: filter .3s ease;
}

.child>img {
    max-width: 100%;
    display: block;
}

.child-hover {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .3s ease;
}

.parent:hover .child {
    filter: blur(2px);
}

.parent:hover .child-hover {
    opacity: 1;
}