zoom background of element when active

I just wanted to see if something like this zoom was possible but just using the background image and leaving the foreground content in the element with no zoom. 

https://kruxor.com/view/code/kMRLz/using-transform-scale-in-css-to-zoom-on-hover-over/

 

HTML

<div class="parent">
  <div class="child"></div>
</div>

CSS

.parent {
  width: 400px; 
  height: 300px;
  transition: all 0.1s;
  overflow:hidden;
}

.child {
  transition: all 0.3s;
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("https://kruxor.com/images/pexels-photo-709552.jpg");
  background-position: center;
  background-size: cover;
}

.parent:hover .child,
.parent:focus .child {
  transform: scale(1.2);
}

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 214 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca