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);
}

Posted in css

4:53 am, March 19, 2021

Other Items in css

pre-line white space settings

pre-wrap preserve line spacing but also wrap where needed

css double page document preview with shadow

adding a background image to the titles of the dark mode card on this page

blur the background image while keeping the foreground normal

background image greyscale filter while foreground is still in colour

zoom background of element when active

rounded click me button with icon

logo tickers marquee slow scrolling

add a moving chevron to your href link

inline form field padding

using text-stroke to add a border to your text

adding background blur to an image using css fill screen

using the nth-of-type selector to target a class with the same name

github logo background png css

animated rings expanding with delay ripple water effects

css slow zoom in animation

using the last-of-type css selector to remove a border from the last item in a list

box hover over effects using pulsate animation

using multiple text shadow

box shadow example(s)

@import and html link to Montserrat font family google font

my default text shadow css

change the cursor to a pointer for an element

make labels or badges look better

make an image white with css using filter brightness and invert

foundation old grid format

nice webkit scrollbars (scroll bar, web kit, nice)

use an emoji on your list items ul li

background image on 3 boxes not scaling correctly fix

css prefers-color-scheme example

using attr in css to get content from html

css perspective and transform css properties testing

using linear gradient background on text css

setting up css variables in your stylesheet

simple table stripe striping

bootstrap collapse or toggle a div visibility

drop shadow text class easy drop shadow

center everything in a div with flex-center (centre)

css font style italic

create a rainbow background using css linear gradient

stop overscrolling on responsive ios

switching stack order of floats with flex

bold the numbers in a ol li list

adding pulsating dots to your css ul li list

css using perspective for transforms

simple linear gradient overlay for an image to make it darker or lighter

wordpress main nav dropdown fix

pulsating dots - glow glowing

using css linear gradient for background overlays

No Items Found.

Add Comment