How to put div behind div in grid and offset it?

Question

I have two divs that contain poster images. I want to put another poster behind each of those and do the following:

offset it by some x and y values
overlay it with semi-transparent div to make it darker
reduce its size while maintaining aspect ratio

How can this be done within the existing grid and and without changes to the two posters in the front?

 films = [ {id: 0, title: 'Welcome Home', year: 2009}, {id: 2, title: 'Aurie', year: 2001}, {id: 3, title: 'Hardship', year: 2005}, {id: 4, title: 'Forth to the past', year: 2004}] data = { film0: films[0], film1: films[1], film2: films[2], film3: films[3] } function update() { poster1 = "https://unsplash.it/458/679.jpg"; poster2 = "https://unsplash.it/458/679.jpg"; document.getElementById("name1").innerText = data.film1.title; document.getElementById("name2").innerText = data.film2.title; document.getElementById("year1").innerText = data.film1.year; document.getElementById("year2").innerText = data.film2.year; document.getElementById("poster1").setAttribute("src", poster1); document.getElementById("poster2").setAttribute("src", poster2); } update();

 body { background-color: rgb(40, 40, 40); } div { border: 1px solid red; }.container { display: grid; grid-template-columns: 20% 25% 8% 25% 20%; grid-gap: 0.5%; padding: 1%; color: white; font-family: sans-serif; text-align: center; }.header, .footer { grid-column-start: 1; grid-column-end: 6; padding: 30px; font-size: 50%; }.poster-container { position: relative; }.poster { object-fit: cover; width: 100%; height: 100%; }.title { background-color: rgba(0, 0, 0, 0.7); position: absolute; width: 100%; bottom: 0; left: 0; padding-top: 7%; padding-bottom: 7%; line-height: 150%; font-size: 110%; }.year { font-size: 90%; }.poster-container:hover >.title {} a { all: unset; } a:hover{ cursor: pointer; }.shutdown{ background-color: rgba(255, 0, 0, 0.5); padding: 1%; }.shutdown:hover{ cursor: pointer; };

 <;DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="header"></div> <div></div> <div class="poster-container"> <img class="poster" id="poster1" /> <div class="title"> <a id="poster1-link" target="_blank"> <div class="name" id="name1"></div> </a> <div class="year" id="year1"></div> </div> </div> <div></div> <div class="poster-container"> <img class="poster" id="poster2" /> <div class="title"> <a id="poster2-link" target="_blank"> <div class="name" id="name2"></div> </a> <div class="year" id="year2"></div> </div> </div> <div></div> </div> </body> </html>

Answer 1

I managed to find a solution:

 films = [ {id: 0, title: 'Welcome Home', year: 2009}, {id: 2, title: 'Aurie', year: 2001}, {id: 3, title: 'Hardship', year: 2005}, {id: 4, title: 'Forth to the past', year: 2004}] data = { film0: films[0], film1: films[1], film2: films[2], film3: films[3] } function update() { poster0 = "https://unsplash.it/458/679.jpg"; poster1 = "https://unsplash.it/458/679.jpg"; poster2 = "https://unsplash.it/458/679.jpg"; document.getElementById("name1").innerText = data.film1.title; document.getElementById("name2").innerText = data.film2.title; document.getElementById("year1").innerText = data.film1.year; document.getElementById("year2").innerText = data.film2.year; document.getElementById("poster1").setAttribute("src", poster1); document.getElementById("poster2").setAttribute("src", poster2); document.getElementById("poster0").setAttribute("src", poster0); document.getElementById("poster3").setAttribute("src", poster0); } update();

 body { background-color: rgb(40, 40, 40); }.container { display: grid; grid-template-columns: 20% 25% 8% 25% 20%; grid-gap: 0.5%; padding: 1%; color: white; font-family: sans-serif; text-align: center; }.header, .footer { grid-column-start: 1; grid-column-end: 6; padding: 30px; font-size: 50%; }.poster-container { position: relative; }.poster { object-fit: cover; width: 100%; height: 100%; }.title { background-color: rgba(0, 0, 0, 0.7); position: absolute; width: 100%; bottom: 0; left: 0; padding-top: 7%; padding-bottom: 7%; line-height: 150%; font-size: 110%; }.year { font-size: 90%; }.remove { background-color: rgba(255, 255, 255, 0.2); padding: 5%; font-size: 90%; } a { all: unset; } a:hover { cursor: pointer; }.shutdown { background-color: rgba(255, 0, 0, 0.5); padding: 1%; }.shutdown:hover { cursor: pointer; }; .poster0 {}.double0 { position: relative; }.double3 { position: relative; }.poster0 { position: absolute; left: -50%; top: -10%; z-index: -1; width: 80%; height: 80%; }.poster3 { position: absolute; right: -50%; top: -10%; z-index: -1; width: 80%; height: 80%; }.overlay0 { position: absolute; left: -50%; top: -10%; z-index: 0; width: 80%; height: 80%; background-color: rgba(0, 0, 0, 0.5); }.overlay3 { position: absolute; right: -50%; top: -10%; z-index: 0; width: 80%; height: 80%; background-color: rgba(0, 0, 0, 0.5); }

 <;DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="header"></div> <div></div> <div class="double0"> <div class="overlay0"></div> <img class="poster poster0" id="poster0" /> <div class="poster-container"> <img class="poster" id="poster1" /> <div class="title"> <a id="poster1-link" target="_blank"> <div class="name" id="name1"></div> </a> <div class="year" id="year1"></div> </div> </div> </div> <div></div> <div class="double3"> <div class="overlay3"></div> <img class="poster poster3" id="poster3" /> <div class="poster-container"> <img class="poster" id="poster2" /> <div class="title"> <a id="poster2-link" target="_blank"> <div class="name" id="name2"></div> </a> <div class="year" id="year2"></div> </div> </div> </div> <div></div> </div> </body> </html>

How to put div behind div in grid and offset it?

Question

1 answers

solution1
0 2022-10-02 13:50:13

How to put div behind div in grid and offset it?

Question

1 answers

solution1 0 2022-10-02 13:50:13

solution1
0 2022-10-02 13:50:13