CSS Transform Scale to Background Image

CSS transform scale to background image

Change background-size on hover. To mimic scale(1.1) use 110%.

div {  width: 560px;  height: 400px;  background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center center no-repeat;}div:hover {  background-size: 110%;}

<div></div>

Stretch and scale CSS background

For modern browsers, you can accomplish this by using background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover means stretching the image either vertically or horizontally so it never tiles/repeats.

That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).

For it to work with lower verions of Internet Explorer, try these CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Scale the element (and background) but not the content

Since children of the element will be affected, this might be a good alternative, using a pseudo element.

.container {  display: block;  width: 100%;  padding: 50px;}.element {  position: relative;  height: 562px;  width: 590px;  display: inline-block;}.element:before {  content: ' ';  position: absolute;  left: 0;  top: 0;  height: 100%;  width: 100%;  display: inline-block;  -webkit-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out;  background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);  background-size: cover;  background-position: center center;}.title {  font-size: 45px;  line-height: 48px;  bottom: 10%;  position: absolute;  margin: 0 25px;  color: #fff;  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);  font-weight: 700;  font-family: sans-serif;  -webkit-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out;}.element:hover:before {  transform: scale(1.05);}

<div class="container">  <div class="element">    <div class="title">This is the big title.</div>  </div></div>

Can't quite get image to scale, and use overflow:hidden to work

Full working code snipped below my steps

remove unnecessary elements Removed purple square, because it's never seen in wanted animation.
Removed the part the full #container div.bottom:hover part.
Removed every style that begins with #shell in the css and later trigger the animation on #container:hover.
main issue Add an #migraine-dentistry after the #container:hover animation, so if someone hovers the container it effects the #migraine-dentistry element. (#container:hover #mi.. {trans..})
In this (#container:hov..) element remove everything and

insert transform: scale(1.2);
because we just want to scale if user is hovering.
Remove whole #container div {..} style element, because we will directly add these styles to the #migraine-dentistry element.
In #container define px values for

> width: 355px; and height: 255px;
just because we not use the #shell element anymore. Also

> set position: relative; and z-index: 2;
that the #migrain.. element is inside his parent. And

> set border-radius: 15px;
for styling. Finally

>remove the display and transition values

because they are simply not needed.

last In #migraine-de.. styles

>set width: 100%; and height: 100%;
to fit div to parent.

> remove border-radius tag

because it's set by the #container

> add transition: 0.3s ease-in-out;
to transition like you wanted.

#container {
  border-radius: 15px;
  width: 355px;
  height: 255px;
  overflow: hidden;
  z-index: 2;
  position: relative;
}
#container:hover #migraine-dentistry {
  transform: scale(1.2);
}
#migraine-dentistry {
  width: 100%;
  height: 100%;
  transition: 0.3s ease-in-out;
  background-image: url('https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
}

<body>
    <div id="shell">
        <div id="container">
            <div id='migraine-dentistry' class="bottom"></div>
        </div>
    </div>
</body>

How to apply effect just to background image and not text

for transition backgrounds use the property background-size, and use background-position to adjust as fits you better

body {  margin: 0}.myimage01 {  background-size: 100%;  background-position:center center;  -webkit-transition: .3s ease-in-out;  transition: .3s ease-in-out;  background-image: url(http://lorempixel.com/1600/900);  padding: 40px 30px;  color: #ffffff;  text-align: center;}.myimage01:hover {  background-size: 130%;}

<li id="armonioso-text-2" class="widget widget_armonioso_text">  <div class="armonioso-textwidget-wrapper  armonioso-textwidget-no-paddings">    <!-- Here I'm currently Applying the efect -->    <div class="armonioso-textwidget myimage01">      <h5>hello world</h5>      <h3>Here how works</h3>      <p>Take a look of new things        <p><a class="btn alt" href="about/index.html" target="_self">About me</a>    </div>  </div>  <!-- Here I'm currently Applying the efect --></li>

How to scale CSS sprites when used as background-image?

Your image sprite has a dimension of 500x400 so define half this size if you want to reduce by 2 on the background-size then adjust the background-position to get any icon you want:

.my-sprite {    background-image: url("https://i.stack.imgur.com/lJpW8.png");    height:50px;    width:50px;    background-position:150px 0px;    background-size:250px 200px;        border:1px solid;}

<div class="my-sprite"></div>

CSS Transform Scale to Background Image