Hover affect different element

by Mohamed Mulla

HTML

<div class="book">
    <div class="info">More info here</div>
    <div class="image">
        Image here
    </div>
</div>

CSS

.book {
    width:200px;
    height:300px;
    background:#ccc;
    position:relative;
}
.info {
    width:90%;
    height:90%;
    margin:5%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background:rgba(0,0,0,0.5);
    display:none;
}
.book .image {
    text-align:center;
    position:relative;
    top:50%;
}
.book:hover .info{
    display:block;
}