Animating background images with CSS

Is it possible to apply the transform: scale() property specifically to the background image only?

I am looking to have the background image scale up on hover

Here is the HTML structure:

<div class="square">
    //Content goes here
</div>

CSS styling:

.square{
background: url('image path here');
background-size: cover;
height: 50vw;
width: 50vw;

I want the background image to scale on hover without affecting the content inside.

If anyone has a solution for achieving this, I would greatly appreciate it.

Thank you.

javascripthtmlcss

Answer №1

If you're only adjusting the background-size without relying on "cover" or "contain" for the initial value, a simple hover effect should suffice.

Alternatively, you can stack a pseudo-element with the background while keeping your element's background transparent, then apply transforms to the pseudo-element for the desired effect.

edit: Here's an example :)

<style>
.container{
  overflow:hidden;
  position:relative;  
}

.scalable-bg::before{
  content:"";
  background:url('http://lorempixel.com/600/400');
  background-size:cover;
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  z-index:-1;
  transition:all 1s ease;
}

.scalable-bg{
  padding:2em;
  color:white; text-shadow: 2px 2px 0 black;
}

.scalable-bg:hover::before {
  transform: scale(2);
}
</style>
<div class="container">
  <div class="scalable-bg">
    <h1>
      Something
    </h1>
    <p>
    Something, something, something, darkside. Something, something, complete
    </p>
  </div>
</div>

https://jsfiddle.net/2kzk1acr/3/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to iterate through an array of HTML5 videos

Having some trouble with my video array - it plays but doesn't loop. I've tried using the HTML video attribute 'loop' and variations like loop="true" and loop="loop" without success. Tonight, all I want is for it to loop properly! var ...

javascriptjqueryhtmlvideo

What is the best way to inform my controller about the loading data progress?

In the midst of developing a complex AngularJS application, my main focus is on bundling all Ajax code within separate services that can be accessed by controllers for data retrieval. However, there arises an issue concerning the necessity to track the sta ...

javascriptajaxangularjs

What is the best way to make the child Div float to the bottom of the parent Div?

Screenshot I attempted various CSS techniques in an effort to make the .booknetic_appointment_container_footer float to the bottom of #booknetic_theme_5, but unfortunately, I was unsuccessful. The closest solution I found involved hardcoding padding, but ...

htmlcss

issue with border in hover effect on navigation menu

I'm looking to replicate a menu design similar to the one shown in this image. My main issue lies with the hover effect, specifically changing the vertical images on both sides. I've made some progress so far and you can view it here: http://jsf ...

htmlhovercss

find the repeated sequences of characters within the text

Trying to grasp a javascript string variable source; Is there an efficient technique to identify all REPEATED substrings of length around 20 characters (even if they overlap or include substrings of slightly different lengths)? An approach that could be ...

javascriptstringperformanceloopssubstring

fade out row upon successful deletion using ajax

My code includes an AJAX function to delete items by row. In my table, there is a column with the action to perform the deletion. Here is the AJAX function: //delete detail function deleteDetail(id_po_req_detail) { var tr = ...

javascriptjqueryajax

Transforming JSON dates to Javascript dates using AngularJS and ASP.NET

How can I convert a JSON date /Date(1454351400000)/ into a proper date format using AngularJS and ASP.NET? $http.get('/home/GetProducts') .success(function (result) { $scope.products = result; }) .error(function (data) { ...

javascriptasp.netangularjsjson

Generate a custom Elementor shortcode dynamically using JavaScript

I have a custom-built website using WordPress and Elementor. I am running code through the html element in Elementor to display dropdown menus. When a value is selected from each dropdown and the button is clicked, the values are stored in variables and th ...

javascriptphpjqueryajaxwordpress

Angular directive fails to consistently trigger jQuery event

My directive is only triggering once, and it's happening when the page is loaded with the directive. What could be causing this issue? HTML - <div class="body"> <a href="#/systems"><div class="viewBySys"></div></a> ...

javascriptjqueryangularjs

Determine if a parsed JSON has the identical structure of a class in Node.js

I am sending a detailed JSON string to my server, here is a simplified version: { "x": 5; "y": "example" "z": [ { "w": 7 "v": 4 }, { "w": 7 "v": 4 } ] } I am now seeking a way to veri ...

javascriptjsonnode.js

The application unexpectedly closes upon receiving a notification while using @react-native-firebase/messaging

I'm currently working on setting up notifications using @react-native-firebase/messaging in a React Native app. I'm able to retrieve the FCM token, but the app crashes when a notification is received. Here's the error I found in Crashlytics ...

javascriptfirebasereact-nativepush-notificationfirebase-cloud-messaging

Building a table with the appendChild() method

I'm a beginner in the world of programming and I've been given a task to create a table of objects. I managed to do it using a certain method, but now I'd like to try creating it using the appendChild method. function addObject() { var ...

javascripthtmlhtml-tableappendchild

Issue with Node.js and Express redirect not directing to intended URL

Utilizing the nodejs/express view engine in my application allows me to render an assigned template onto the screen when the route points to an existent URL. Previously, I had set up a redirect to the homepage for any user typing in an unexisting URL. Howe ...

javascriptnode.jsexpresshttp-redirect

Why does the implementation of my interface differ from what is specified in the TypeScript documentation?

Currently delving into the world of TypeScript documentation https://www.typescriptlang.org/docs/handbook/2/classes.html Specifically focusing on the section implements Clauses, an interesting revelation surfaces: A Word of Caution It’s worth noting t ...

javascripttypescript

Creating div elements that correspond to the parameters in an array

Struggling with rendering parameters in Angular 8, I'm fetching data from an API that needs to be displayed in divs corresponding to the data. The issue arises when the data is displaying in every div, instead of being limited to specific ones. Here&a ...

htmlarraysangular

Leveraging package.json information within HTML using ReactJS

Currently, I am facing a situation where I need to incorporate the name attribute from the package.json file into my HTML code in order to use it as the title of the document. While I am aware that this can be achieved through the use of the react-helmet ...

htmlreactjs

Issue with applying projection to graticule in D3 and Three.js: unable to execute projection on graticule

My current project involves creating 3D graticules using three.js. The process starts by constructing a mollweide projection graticule in SVG with D3, followed by extracting the graticule path points and converting them to three.js vectors. However, the r ...

javascriptd3.jssvgthree.js

What methods can I use to stop the styles of a child component from impacting those of the parent component

Is there a way to create CSS rules that achieve the following conditions? The parent component's CSS does not impact the child component The child component's CSS does not affect the parent component The child component is sourced from an exte ...

javascriptvue.jsvue-component

Button to toggle the collapse of the Bootstrap navbar is unresponsive

My bootstrap navbar is not collapsing, even though the toggle button appears. When clicked, nothing happens. I'm using React so I'm using className instead of class. I've tried copying directly from the Bootstrap example and also from a Stac ...

javascriptcssreactjsnavbarbootstrap-4

What is the best way to verify Vue.js fields that have been pre-filled from a database source?

Looking to validate the inputs from a form using vuejs. Also, if the data is pre-populated, I want the inputs to switch to readonly mode. <input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillPr ...

javascriptvue.jsvuejs2