I Can't Make The Background COLOUR of an Image Zoom in Without The Image Itself Zooming In

Hello, basically I’m trying to make the background COLOUR of these images to zoom in, but I keep on making the image itself zoom in which I am not trying to do…


Basically I want the background colour to zoom in… just not the icon itself…

PLEASE HELP??

(here’s the CSS)

.wsite-image-border-none img {
    width:100%;
    vertical-align:top;
	border-radius: 25px;
    background-color: #000;
		background-position:center;
	transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}
	
	.wsite-image-border-none :hover img {
    width:100%;
    vertical-align:top;
    border-radius: 25px;
    background-color: #000;
  transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
} 
}

It’s hard to give a definate answer without also seeing the html that the css is applied to. But looking at the css, the selectors you have select the img element, so of course they will affect the icon image. You may want to select the image parent container instead.

You can transition this however you wish.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>image is centered</title>
<!--
https://www.sitepoint.com/community/t/i-cant-make-the-background-colour-of-an-image-zoom-in-without-the-image-itself-zooming-in/234894
Rees_Jones
Aug 26,2016 12:30 PM
-->
    <style type="text/css">
.outer {
    display:table;
    border-spacing:225px;  /* Change these numbers (may be h & v) to resize the inner box.  Not a percent */
    width:600px;  /* Max size of outer box. */
    height:600px;  /* Max size of outer box. */
    position:relative;  /* reference for icon */
    outline:1px dashed red;  /* Shows max size of outer box.  To Be Deleted. */
    animation: mymove 4s infinite;
}
.inner {
    display:table-cell;    /* This is the resizable box */
    background-color:#bdf;
    border:6px solid #79b;
    border-radius:20%;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    cursor:pointer;
}
@keyframes mymove {
    50% {border-spacing:10px;}
}

    </style>
</head>
<body>

<div class="outer">
    <div class="inner">
        <img src="http://placehold.it/100x100/a22" alt="" width="100" height="100">
    </div>
</div>

</body>
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.