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. 




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


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

.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.

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.