Creating a dynamic overlapping image effect with CSS and JavaScript

Question

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the height?

Here is the test I conducted: https://jsfiddle.net/g8h8umt3/

I successfully adjusted the width using CSS:

#img-header{
    margin-left: 50%;
    transform: translateX(-50%);
}

EDIT:

Here is an illustration of how it should work: Image

The background image should maintain its size while the parent div adjusts accordingly based on the screen size. I figured out the behavior for the width, but I'm unsure how to do the same for the image's height.

I also attempted to add:

#img-header{
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%,-50%);
}

However, this solution doesn't seem to be effective.

javascript html css

Answer 1

Answer №1

To achieve the image maintaining its size and being hidden on all corners as the parent's size changes, you can use absolute positioning for the image along with a combination of left: 50%; top: 50%; transform: translate(-50%,-50%) to center the image within the parent container. This way, the parent will scale proportionally around the image.

$(document).ready(function () {

$('#img-header-container').height($( window ).width()/3);

    $( window ).resize(function() {
onResized();
});
});

function onResized(){
$('#img-header-container').height($( window ).width()/3);
}

#img-header-container{
  width: 100%;
overflow: hidden;
  position: relative;
}

#img-header{
  position: absolute;
left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
  <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header"/>
</div>
<div style="min-height:50px">Conent After</div>

Also, instead of using jQuery to set the container height to one-third of the window's height, you can utilize viewport units (vh) along with calc() for a more streamlined solution.

#img-header-container {
  height: calc(100vh / 3);
  overflow: hidden;
  position: relative;
}

#img-header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
  <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header" />
</div>
<div style="min-height:50px">Conent After</div>

Another approach is to use a background image instead of an img tag, reducing markup and CSS complexity.

#img-header-container {
  height: calc(100vh / 3);
  background: url('https://clsimplex.com/images/releases/headers/quality-code.jpg') center center no-repeat;
}

<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
</div>
<div style="min-height:50px">Conent After</div>

Answer 2

To achieve the image maintaining its size and being hidden on all corners as the parent's size changes, you can use absolute positioning for the image along with a combination of left: 50%; top: 50%; transform: translate(-50%,-50%) to center the image within the parent container. This way, the parent will scale proportionally around the image.

$(document).ready(function () {

$('#img-header-container').height($( window ).width()/3);

    $( window ).resize(function() {
onResized();
});
});

function onResized(){
$('#img-header-container').height($( window ).width()/3);
}

#img-header-container{
  width: 100%;
overflow: hidden;
  position: relative;
}

#img-header{
  position: absolute;
left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
  <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header"/>
</div>
<div style="min-height:50px">Conent After</div>

Also, instead of using jQuery to set the container height to one-third of the window's height, you can utilize viewport units (vh) along with calc() for a more streamlined solution.

#img-header-container {
  height: calc(100vh / 3);
  overflow: hidden;
  position: relative;
}

#img-header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
  <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header" />
</div>
<div style="min-height:50px">Conent After</div>

Another approach is to use a background image instead of an img tag, reducing markup and CSS complexity.

#img-header-container {
  height: calc(100vh / 3);
  background: url('https://clsimplex.com/images/releases/headers/quality-code.jpg') center center no-repeat;
}

<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
</div>
<div style="min-height:50px">Conent After</div>

Answer 3

Answer №2

I'm not sure if I fully grasp your intentions Here is an example based on my interpretation

#main-image-container{
  width: 100%;
}

#main-image{
  max-width:100%;
}

<div style="min-height:50px">Content Before</div>
<div id="main-image-container">
  <img src="https://example.com/image.jpg" id="main-image"/>
</div>
<div style="min-height:50px">Content After</div>

Answer 4

I'm not sure if I fully grasp your intentions Here is an example based on my interpretation

#main-image-container{
  width: 100%;
}

#main-image{
  max-width:100%;
}

<div style="min-height:50px">Content Before</div>
<div id="main-image-container">
  <img src="https://example.com/image.jpg" id="main-image"/>
</div>
<div style="min-height:50px">Content After</div>

Creating a dynamic overlapping image effect with CSS and JavaScript

Answer №1

Answer №2

Similar questions

Hovering over triggers tooltip flickering with Mouseover/Mouseenter interaction

When using the POST method to modify data via an HTML form, the previous values may be

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Having trouble accessing the root route in production environment

Error encountered during Atom execution - The command '/usr/bin/env: 'node' was not found in the directory

Displaying a DIV after entering text into an <input> field using JavaScript

Is it possible to use window.print() to print the entire contents of a DIV with both horizontal and vertical scroll bars?

How can you adjust the div orientation for small screens using Bootstrap?

What are the tips for aligning this button perfectly on the page, despite being centered in a computer's resolution?

Steps for inserting a clickable phone number link within innerHTML1. First, create an

What is the best way to access a variable from a different function in JavaScript?

Is the PHP configuration correct for Apache on your local server?

Automatically populating state and city fields with zip code information

Out of Sync Promise Chain

The difference between invoking a method directly and utilizing a function to invoke a method

Is it possible for Prototype to enhance SVG components?

Is it acceptable to post variables using AJAX for processing?

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

dividing Handlebars HTML content into different files or sections

Using axios to make a request to a REST API