🏠 Root
/
home
/
artorgp
/
www
/
wp-content
/
plugins
/
visual-portfolio
/
gutenberg
/
components
/
media-preview-card
/
Editing: style.scss
.vpf-component-media-preview-card { position: relative; overflow: hidden; border-radius: 2px; &:hover, &:focus-within { .vpf-component-media-preview-card-actions { opacity: 1; pointer-events: auto; } } } .vpf-component-media-preview-card-media { :where(img, video, iframe) { display: block; width: 100%; aspect-ratio: 2 / 1; } :where(img, video) { object-fit: cover; object-position: 50% 50%; } iframe { border: 0; } } .vpf-component-media-preview-card-actions { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 8px; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.34) 100% ); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .vpf-component-media-preview-card-action.components-button { min-width: 0; flex: 1; justify-content: center; backdrop-filter: blur(16px) saturate(180%); background: rgba(255, 255, 255, 0.75); }
Save
Cancel
