/* quick reset */ * { margin: 0; padding: 0; border: 0; } /* relevant styles */ .img__wrap { position: relative; height: 200px; width: 257px; } .img__description { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(29, 106, 154, 0.72); color: #fff; visibility: hidden; opacity: 0; /* transition effect. not necessary */ transition: opacity .2s, visibility .2s; } .img__wrap:hover .img__description { visibility: visible; opacity: 1; }