Use CSS to zoom in on the background without any text overlays

I'm attempting to create a zoom effect on the background image only. The code snippet below shows a clickable element with an image background. However, when I apply the zoom effect, it also zooms in on the text within the div. Is there a way to isolate the zoom effect to just the background image?

<a class="outer-tile tile-text" href="#">
    <div class="inner-tile d-flex flex-column align-items-start" style="background-image: url('https://picsum.photos/200/300')">
      <div class="mb-auto p-2">
        <span class="b-dark p-1">MyTag</span>
      </div>
      <div class="b-dark w-100 p-2">
        <h3>My Title</h3>
        <p>This is the content</p>
      </div>
    </div>
  </a>


.outer-tile {
    overflow: hidden;
    height: 400px;
}

.inner-tile {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
}

.inner-tile:hover {
    transform: scale(1.2);
}

Check out this codepen for reference.

Any suggestions on how to achieve the desired background zoom effect without affecting the text content?

Answer №1

If you want to display a background image behind text elements, make sure to place the image on an element that is a sibling, not a parent. Utilize positioning and z-index properties to achieve this effect:

.outer-tile {
    overflow: hidden;
    height: 400px;
    position:relative;
}

.tile-underlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1;
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
}

.outer-tile:hover .tile-underlay {
    transform: scale(1.2);
}

<a class="outer-tile tile-text" href="#">
    <div class="tile-underlay d-flex flex-column align-items-start" style="background-image: url('https://picsum.photos/200/300')"></div>
    <div class="mb-auto p-2">
      <span class="b-dark p-1">MyTag</span>
    </div>
    <div class="b-dark w-100 p-2">
      <h3>My Title</h3>
      <p>This is the content</p>
    </div>

</a>

https://codepen.io/anon/pen/NLyYKY

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

The Bootstrap navigation bar fails to expand

After extensive searching, I still can't figure out why my bootstrap menu isn't opening as expected. I made sure to link JQuery first to try to resolve the issue, but it doesn't seem to have made any difference. I'm starting to wonder ...

Adjust the size of the image to match the dimensions of the div

Whenever I try to adjust the size of the image inside the div element, it doesn't seem to change. The div itself functions properly, but the image remains fixed in size. Is there a way to scale the image proportionally when resizing the div? div.col ...

How can you center a webpage and make it occupy 60% of the screen?

I was attempting to design a website where the main content takes up 60% of the body. This is what I tried initially: body { align-items: center; text-align: left; justify-content: center; width: 60%; } Unfortunately, this approach did not work ...

Dynamic resizing of elements/images using jQuery to maintain proportions

My goal is to create a design where images resize proportionally with their containing elements. The challenge I am facing is achieving the proportional resizing of each image container's height as its width changes upon window resize. Currently, the ...

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

The iframe remains unresponsive and fails to resize as needed

I am facing an issue while trying to embed an iframe into one of my websites. It seems that the responsiveness is lost and it does not scale properly on mobile devices. You can see the issue here. Interestingly, when I place the same iframe on a plain HTM ...

What is the process of including a CSS class in a NAV anchor tag on WordPress?

I recently started using Bootstrap 4 and have structured my menu in the following way: <ul class="navbar-nav mx-auto justify-content-center"> <li class="nav-item"> <a class="nav-link" href="index.php">HOME</a> </ ...

Unable to view Django templates in default Django project

Recently, I created a fresh Django project and set up a new superuser. Everything seemed to be working fine until I tried accessing the admin interface. To my surprise, none of the default CSS files were being applied. After some investigation, I realize ...

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...

Formatting issue with chords and lyrics

I am in the process of creating a website that features chords and lyrics. However, I want to ensure that the chords cannot be copied due to some formatting issues. The main objective is for users to be able to copy the chord and lyrics together and paste ...

Show a button using CSS when the cursor is hovering

Expressing my gratitude to everyone! I need assistance with implementing a function in reactJS where the <button /> remains hidden during page loading and reveals itself when hovered over. Despite trying various methods, I have been unable to resolve ...

Utilizing rvest to extract user videos from Twitter

When using rvest to extract data from websites, I found that I am unable to scrape dynamic content. For instance, how can I extract the audience count (44K) from this video post? https://i.sstatic.net/CRXZ9.png Here's what I attempted: library(rves ...

Manipulate the lines in an HTML map and showcase the distinctions between them

I've been searching through various inquiries on this particular subject, but none have provided me with a satisfactory response. I have created a map where I've set up 4 axes using the following code: function axis() { var bounds = ...

Disruption of HTML file content

When I open my HTML file directly, the entire content appears messed up. However, when I view it through live preview in Brackets, everything looks fine. What could be causing this issue? Keep in mind that I am using CSS and JavaScript files from Bootstr ...

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

Create an alert box that covers the content

I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it ...

The image disappears when I click on a link and then return to the main page, but this only happens in Mozilla Firefox

Upon opening the main page, everything functions flawlessly. However, if I navigate to another page through one of my href links and then return to the main page, my div with the class "bild" disappears. Oddly enough, this issue only occurs in Mozilla Fire ...

Changing the height of the parent div in Angular 2 to match the height of the child div that holds an image

When I make an HTTP call to fetch a block of HTML from an external source, the structure of the retrieved HTML looks like this: <div class="container"> <div class="wrapper"> <div class="image"> <img src="img_url> ...

Create a layout with four columns, ensuring that each set of two columns has equal heights

Trying to create a container with two columns, each containing two columns of their own, all with equal heights using only CSS. The issue: the inner columns in their parent column do not align with the other inner columns in their respective parent column ...

Changing a p element to a div and adding a class in Bootstrap 4.5

To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...