smoot show elemet hover effect

by John Doe

HTML

<div class="wrap">
    <div class="content">Lorem Ipsum Dolor</div>
</div>

CSS

.wrap{
    width: 400px;
    height: 300px;
    background: url('https://m1.behance.net/rendition/modules/157016747/disp/6039a84378e2cad77c6a86449c2be494.gif') no-repeat;
    border: 3px solid #020202;
    border-radius: 6px;
    margin: 70px auto 0 auto;
}
.content{
    opacity: 0;
    transition: opacity 700ms ease-in-out;
    display: block;
    width: 100%;
    height: 100%;
    background-color: hsla(120, 60%, 70%, 0.3);
    text-align: center;
    line-height: 530px;
    font-size: 30px;
    font-family: arial;
    color: #000;
    text-shadow: 1px 1px rgb(100,100,100);
}
.wrap:hover .content{
    opacity: 1;
}