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

Delaying Ajax request

Methods for ensuring that fake browser tab focus remains on several tabs simultaneously

How to toggle a boolean variable in AngularJS when transitioning between states

Reading multiple files in NodeJS can be done in a blocking manner, and then the

Dygraphs.js failing to display the second data point

The TypeScript inference feature is not functioning correctly

Prevent user input in HTML

I need help figuring out the right way to define the scope for ng-model within a directive

What strategies does Wired magazine use to create their unique thick underline link style?

What is the best way to transfer information from a model to the screen?

Hey there, could you please set up the DateTimePicker in my expo project using React Native?

Performing addition operations on numbers entered through an HTML input field using PHP

Is it possible to use Javascript to gradually fade in text, one word at a time, with multiple divs instead of just one?

Tips on altering the location path when redirecting to a different page using window.location?

Creating a new version of an existing method found within a component in a Vue store.js file

Locate an original identifier using Selenium WebDriver

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

Outputting HTML using JavaScript following an AJAX request

Remove padding in Twitter Bootstrap table cells

Retrieving data from an HTML webpage using VBA