CSS - Convert Postcard Slider format to hover format

/*================================
POSTCARD LAYOUT - CONVERT TO HOVER
================================*/

.postcardlayout .cmsItem:before {
content:" ";
position:absolute;
background-color:black;
opacity:0;
top:0;bottom:0;left:0;right:0;
z-index: 2;
transition:opacity 0.5s ease;
}

.postcardlayout .cmsItem .cmsTitleAndTextNoPrice{
z-index:3;
transition:all 0.5s ease;
margin-top:30px;
opacity:0;
}

.postcardlayout li .cmsItem {
justify-content: center;
text-align: center;
align-items: center;
}

.postcardlayout .cmsItem:hover:before {
opacity:0.9;
}

.postcardlayout .cmsItem:hover .cmsTitleAndTextNoPrice{
opacity:1;
margin-top:0px;
}