JSFiddle - React, Tailwind, and code Playground

by Clare12345

HTML

<div class="container">
        
            <div class="sep">
                
                <div class="image-hover img-layer-image-hover-backgroundchange">
                    <img src="http://www.plici.ro/images/3-1386110366.jpg">
                    <div class="layer">text</div>
                </div>
                
           	</div>
   
    </div>

CSS

/****** image hover ******/

.image-hover * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.image-hover { position:relative;width:450px;height:200px;display:inline-block;overflow:hidden;background:#fff;border:10px solid #fff;
box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)}
.image-hover a {text-decoration:none}





/*** effect layer-image hover - background change ***/

.img-layer-image-hover-backgroundchange .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0.6;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover-backgroundchange:hover .layer {opacity:0.5;background-color:#fff;
}

.img-layer-image-hover-backgroundchange .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}

.img-layer-image-hover-backgroundchange:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}