.asset-preview { position: relative; } .asset-preview__blocked { box-sizing: border-box; background: black; color: white; height: 80%; padding: 5px; //remove margin-bottom after mystery 5px on wrapper is gone. margin-bottom: 5px; } .asset-preview__image { width : 100%; padding: 0; margin : 0; } .asset-preview__video { cursor: pointer; background-color: #ffffff; width: 100%; position: relative; } h3.asset-preview__title { margin: 0; text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; line-height: 1em; max-height: 2em; } .asset-preview__play-wrapper { border: 0px; padding: 0px; margin: auto; position: relative; } .asset-preview__play-overlay { padding: 0; border: 0; position: absolute; opacity: 0.80; height: 25%; top: 37.5%; left: 0; right: 0; bottom: 0; z-index: 1000; margin: 0 auto; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='black' stroke-width='2' fill='black' fill-rule='evenodd' stroke-linejoin='round'%3E %3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E %3Cg stroke='white' stroke-width='1' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='25 19 42 30 25 41'/%3E %3C/g%3E %3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .asset-preview__play-wrapper:hover .asset-preview__play-overlay { opacity: 0.2; }