Using a zoom background image in an HTML document without any accompanying text

I am trying to create a zoom effect on a background image without affecting the text overlaying it.

Here is the CSS code:

.page1-box {
    width: 1200px;
    height:800px;
    overflow:hidden;
}
.page1 {
    width: 100%;
    height: 100%;
    background: url('../images/home_page.jpg');
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 5s ease-in;
}
.page1.zout {
    transform:scale(1.2);
}

And here is the JavaScript code:

setTimeout(function () {
    $('.pag1').addClass('zout');
}, 100);

Finally, this is the HTML Code:

<section class="page1">
     <div class="page_container">
        <div class="text">
            sample text here
        </div>
     </div>
 </section>

Currently, when I run this code, both the background image and the text get transformed. Is there a way to isolate the zoom effect only to the background image?

Any help would be appreciated.

jqueryhtmlcss

Answer №1

Here are a couple of methods to achieve a zooming effect:

Method One: Using background image

 <div class="page-bg"></div>

Create an empty div within your section element and set a background image with defined height and width. Although not the most semantic markup, you can give it a try:

.page-bg {
    width: 100%;
    height: 100%;
    background: url('https://pbs.twimg.com/media/B6mjgHuCIAEgyli.jpg');
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 5s ease-in;
    z-index: -1;
    position: absolute;
}

Check out the JSFIDDLE for this effect.

Method Two: Semantic approach Instead of using images as background in CSS, directly include them in your HTML markup and adjust their positioning with parent elements through CSS. This provides more flexibility.

<div class="page1-box">
    <section class="page1">
        <img src="../images/bg-img.jpg" alt="bg">
        <div class="page_container">
            <div class="text">sample text here</div>
        </div>
    </section>
</div>

The CSS for this method is similar to the first one, so I won't repeat it here. Experiment with it and if you encounter any issues, feel free to leave a comment below. :)

Answer №2

Here are two solutions you can try:

'Zoom' in on your background image by adjusting the background-size property:

.page1.zout {
     background-size: [VALUE];
}

Experiment with different values for 'Value' until you achieve the desired size.

Move the text outside of the transformed element:

<section class="page1">
     <div class="page_container">
     </div>
 </section>

 <div class="text">
      Enter sample text here
  </div>

By moving the text outside of the section, the transformation will no longer affect it. However, you may need to adjust the positioning of the text since it is now separate from the page structure.

If placing the text outside the section compromises the semantic structure of your DOM, consider creating a separate element within the section for the zoomed background:

<section class="page1">
     <div class="background-to-transform">
     </div>
     <div class="text">
         Enter sample text here
     </div>
 </section>

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

Collect the text shown in an alert message created with JavaScript

I'm currently unsure if this is achievable or not. In one of my scenarios, I aim to extract text that appears in alert boxes on external websites by including my JavaScript file. Is there a method to obtain the text content shown in an alert message ...

javascripthtml

Having trouble properly wrapping divs using nextUntil() method

I am facing an issue with wrapping elements in HTML. The code snippet I have tried is not giving me the desired result. $('.cards .card-image').each(function() { $(this).nextUntil(".card-description").addBack().wrapAll("<div class='c ...

jquery

Efficiently making JQuery Ajax requests using HTTP Basic Authentication

I am currently experiencing challenges with implementing HTTP Basic Authentication in JQuery when communicating with a REST-based server. This server provides responses in both XML and JSON formats, but I have chosen to work with JSON format. Our authoriz ...

javascriptjqueryajaxbasic-authenticationhttp-authentication

What is the best way to update and add data with just one click using jQuery?

Trying to dynamically add text to textboxes by clicking an "add" button. The code allows for adding/removing textboxes that save values to and delete from a database. Upon page load, a function called showitem creates textboxes dynamically and populates th ...

javascriptphpjqueryajax

What is the best way to disable the button hover effect after it has been clicked?

Many posts I've come across have similar issues to mine, but the suggested solutions are not working for me. I am struggling to remove the hover property of my button when it is clicked before triggering the removal event I have set up. Edit: Just t ...

javascripthtmljquery

Sending a document through an ajax request from a bootstrap dialogue box

Trying to send a file to a server through a bootstrap modal using ajax. Here's the modal html: <div class="modal-body"> <div> <form class="form" role="form" id="attachform" enctype="multipart/form-data"> <input type="file" name= ...

javascriptphpjqueryajax

Is it possible to apply CSS to only the first element?

I have designed a pricing form like the one shown below: To view a full page version of my code for easier reading, please click on the link provided. @import url('http://fonts.googleapis.com/css?family=Indie+Flower'); @import url('http: ...

htmlcssresponsive-design

Using JavaScript to automate keystrokes programmatically

Is there a way to programmatically close a webpage using the keyboard shortcut control + W? I'm wondering if I can write code that will mimic this specific shortcut (control+W). ...

javascriptphphtml

Stop video and audio playback in an android webview

Is there a way to pause audio and video in an Android WebView without disrupting the page rendering? I have tried various methods but haven't found one that successfully pauses both the sound and the video without affecting the WebView. webView.onPau ...

javascriptandroidhtmlwebviewandroid-webview

Issue with Angular 6 Animation not showing up

Looking to incorporate an animation spinner into my Angular app Found this spinner example: https://codepen.io/z-/pen/OPzNLz spinner.component.html import { Component, OnInit } from '@angular/core'; @Component({ selecto ...

htmlcssangularanimation

Establishing a jQuery extension

Reviewing some code on our website led me to this particular snippet: <script> (function (a) { _q = function () { return a; }; $ = function (f) { typeof f === 'function' && a.push(arguments); return $; }; ...

jqueryasp.net-mvc

Obtaining serverTime from a webpageWould you like to learn

Is it possible to retrieve the serverTime using jquery ajax functions like $.get() or $.post()? I am looking to store this serverTime in a variable that can be utilized later on in javascript. You can access the webpage at: To use the get and post functi ...

javascriptphpjqueryajax

Troubles encountered with image referencing while generating a styleguide via kss-node

I'm currently utilizing the NodeJS implementation of KSS for my project. The file structure I am working with is as follows: styles (.scss files) public (compiled .css files) images (images & sprites) guide (auto-generated style ...

cssnode.jssassdocumentation-generationknyle-style-sheet

The process of HTML compilation is halted due to the unexpected presence of the forbidden 'null' data type, despite the fact that null cannot actually be a valid value in

Encountering an issue with my HTML code, where the compiler stops at: Type 'CustomItem[] | null | undefined' is not compatible with type 'CustomItem[] | undefined'. Type 'null' cannot be assigned to type 'CustomItem[] ...

htmlangulartypescripttypeerrorngxs

Tips on aligning text to the left on mobile devices using CSS and HTML

When viewed on a standard 16:9 computer screen, everything looks perfect with text on the left and an image on the right. However, when it comes to smaller screens like phones, the picture appears on top of the paragraph instead. I am new to this, so any a ...

htmlcss

CSS grid is organizing itself neatly on larger screens

I'm currently facing an issue with displaying a CSS grid on my page. When viewed on desktop, the grid appears stacked up instead of in separate columns. I've tried various methods like dividing it into 4 columns and using spans for width but noth ...

phpcssgridcss-grid

Press the button to access the URL within the current window

Working with Angular, I attempted to develop a function to open a URL in the current window. However, the code below within the controller actually opens a new window: $scope.openUrl = function(url) { $window.open(url); }; ...when using ng-click=&apo ...

javascripthtmlangularjs

Leveraging an array of Elasticsearch documents using AngularJS

The query results are given below... { "took": 6, "timed_out": false, "_shards": { "total": 5, "successful": 5, "failed": 0 }, "hits": { "total": 45, "max_score": 0, "hits": [] }, "aggregations": { ...

htmlarraysangularjselasticsearchiteration

Styling with CSS using the em unit to make an image half the size of its parent div element

I'm struggling with resizing an image within a div using the em size unit. I want the image to be half the size of its parent div, so I set both the width and height CSS properties of the image to 0.5em. However, when looking at the code below, you c ...

htmlcssfont-size

javascript get the value of the text field

Is there a way to calculate even and odd numbers using a text field for entering the range of values and a select tag to choose between even and odd? How can I retrieve the value from the text field in order to pass it to the calculation function? Custom ...

javascripthtml