Fix positioning of attachment thumbnail overlays.

Prevents the overlay from blocking buttons inside the attachment preview, such as the remove button in the gallery editor.

see #21390.


git-svn-id: https://develop.svn.wordpress.org/trunk@22343 602fd350-edb4-49c9-b593-d223f7449a82

wp-includes/css/media-views.css

@@ -273,21 +273,13 @@
 	margin: 0 auto;
 }
 
-.attachment .thumbnail {
-	-webkit-transform: translate( 50%, 50% );
-	-moz-transform:    translate( 50%, 50% );
-	-ms-transform:     translate( 50%, 50% );
-	-o-transform:      translate( 50%, 50% );
-	transform:         translate( 50%, 50% );
-}
-
 /* Vertically center the icons. */
 .attachment .icon {
 	top: 50%;
 	left: 50%;
 }
 
-.attachment-preview:after {
+.attachment-preview .thumbnail:after {
 	content: '';
 	display: block;
 	position: absolute;
@@ -304,8 +296,21 @@
 	left: 0;
 }
 
+.attachment .thumbnail .centered {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	-webkit-transform: translate( 50%, 50% );
+	-moz-transform:    translate( 50%, 50% );
+	-ms-transform:     translate( 50%, 50% );
+	-o-transform:      translate( 50%, 50% );
+	transform:         translate( 50%, 50% );
+}
+
 .attachment .icon,
-.attachment .thumbnail img {
+.attachment .thumbnail .centered img {
 	-webkit-transform: translate( -50%, -50% );
 	-moz-transform:    translate( -50%, -50% );
 	-ms-transform:     translate( -50%, -50% );

wp-includes/media.php

@@ -1327,7 +1327,9 @@ function wp_print_media_templates( $attachment ) {
 				<div class="media-progress-bar"><div></div></div>
 			<% } else if ( 'image' === type ) { %>
 				<div class="thumbnail">
-					<img src="<%- url %>" draggable="false" />
+					<div class="centered">
+						<img src="<%- url %>" draggable="false" />
+					</div>
 				</div>
 			<% } else { %>
 				<img src="<%- icon %>" class="icon" draggable="false" />