Css trick: image magnification on hover

I setup animation speed  by using "transition" property and image size by using "transform". transform: scale(1) - default state, transform: scale(1.1); - image magnification on hover. You may need to add "overflow:hidden;" to image parent element. As additional effect i use opacity

.field-name-field-image, .field-name-field-hero-image-media{ margin-bottom:5px; img{ width:100%; height:auto; transform: scale(1); transition: all 0.2s 0s ease-in-out; opacity:0.9; display:block; } } &:hover { .field-name-field-image, .field-name-field-hero-image-media{ img{ transform: scale(1.1); opacity:1; } } }