Looking for a solution with my grid view where I want to translate the items of the second column on the y axis, as shown in the image. I attempted to use the translateY() function, but it resulted in the need to scroll in order to see the translated items, which is not the desired behavior.
When working with a grid, all cells are aligned along grid lines.
To apply translations to specific cells, first define a grid. Make the even cells relative and nest a div inside as absolute to apply the translate property.
* {
margin: 0;
padding: 0;
color: #FFFFFF;
background-color: #131313;
font-family: sans-serif;
}
#container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
height: 100%;
}
#container>div {
min-height: 300px;
position: relative;
padding: 1em;
}
#container>div:nth-child(even)>div {
background-color: lightgrey;
position: absolute;
width: calc(100% - 2em);
transform: translateY(100px);
z-index: 1;
}
#div1 {
background-color: rgba(128, 135, 81, 0.5);
}
#div2 {
background-color: rgba(147, 0, 65, 0.5);
}
#div3 {
background-color: rgba(111, 6, 26, 0.5);
}
#div4 {
background-color: rgba(37, 65, 97, 0.5);
}<div id="container">
<div id="div1">
<div>
<img src="https://picsum.photos/id/237/200/200">
<br> Urna neque viverra justo nec. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Viverra aliquet eget sit amet tellus. Nullam non nisi est sit amet. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Dapibus ultrices
in iaculis nunc. Suspendisse potenti nullam ac tortor.
</div>
</div>
<div id="div2">
<div>
<img src="https://picsum.photos/id/124/200/200">
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="div3">
<div>
<img src="https://picsum.photos/id/87/200/200">
<br> Nisl nisi scelerisque eu ultrices vitae. Erat pellentesque adipiscing commodo elit at imperdiet dui. Nulla facilisi cras fermentum odio eu. At imperdiet dui accumsan sit amet nulla facilisi. Ullamcorper sit amet risus nullam eget felis. Ultrices
sagittis orci a scelerisque purus semper eget duis. Eu facilisis sed odio morbi. Dui accumsan sit amet nulla. Quisque id diam vel quam elementum pulvinar etiam non. Praesent semper feugiat nibh sed pulvinar proin gravida.
</div>
</div>
<div id="div4">
<div>
<img src="https://picsum.photos/id/111/200/200">
<br> In hac habitasse platea dictumst quisque sagittis purus sit amet. Ut diam quam nulla porttitor. Sit amet consectetur adipiscing elit ut aliquam purus sit. Malesuada pellentesque elit eget gravida cum sociis. Eu nisl nunc mi ipsum faucibus vitae
aliquet. Sit amet volutpat consequat mauris nunc congue nisi. Libero justo laoreet sit amet.
</div>
</div>
</div>I am completely new to java script, so I have been copying and pasting code. However, it seems like the images are not loading properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" ...
Can you provide guidance on how to update a component in +layout.svelte whenever the userType changes? I would like to toggle between a login and logout state in my navbar, where the state is dependent on currentUserType. I have a store for currentUserTyp ...
Dear Fellow Coders, Could anyone lend a hand? I encountered this issue on my website after uploading it to my FTP: "Resource interpreted as Stylesheet but transferred with MIME type text/plain" </head> <body> <div class= "navbar navbar ...
Has anyone encountered a strange issue while building an HTML table for an HTML email? Whenever I insert an image into a <td>, it causes the cell to expand to its maximum width, affecting all the columns to the right by resizing them to their minimum ...
I'm currently in the process of building a website and I'm facing an issue with converting measurements to em's. The script that I have reused from a previous project only seems to work with pixels, despite my efforts to make it compatible w ...
Currently, I'm working on a website where I am incorporating the Flipkart API to display a list of products. However, the products are not appearing in the well-formatted view that I had designed. Specifically, I want only 4 products to show per row b ...
The Issue I've encountered a problem while developing a small app for a website. The form in the app requires validation, but conflicts with existing jQuery scripts have been causing errors. These conflicting styles are essential to maintain the desi ...
Our team is currently working on multiple microservices simultaneously. While traditional microservice architecture discourages code sharing and reuse between services, we are considering the benefits of consistent styling across all services that have Web ...
Struggling with bringing my website ideas to life! My header contains a navigation bar, followed by a centered chat box within a fixed <section>. Want the left and right side of the chat box to be content areas that scroll in sync while the chat box ...
I am in the process of updating the user interface for my website, utilizing Bootstrap 5.3. Initially, I utilized the CDN link provided in the official documentation. Recently, I acquired Bootstrap Studio as a tool to streamline the UI development process. ...
[Link removed] Is anyone else experiencing an issue with the columns on a website layout? I have 5 columns set up with each post taking up 20% width. It looks fine in Chrome, but in IE and Firefox, the last column gets pushed below so there are only 4 col ...
Sorry if this is a bit unclear, but I'm trying to figure out how to change only a section of my font when it overlaps with an image while scrolling. If you visit this example website, you'll see what I'm referring to: For a visual represen ...
I am facing an issue while using .slideDown() with multiple classes. I want only one class to toggle/dropdown at a time, but currently when I press the button, all classes show up instead of just the one I want to display. How can I achieve this? Here is ...
Whenever a sub-menu is activated, only the current sub-menu should be open while the others remain closed. I need the search function to be enabled on the text box and display all items containing the specified value while also changing the color of <a ...
I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...
Looking to create a design similar to this one, but unsure of the terminology: https://i.sstatic.net/4QRcw.png I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw .containe ...
My friend is currently designing his website, and he has encountered an issue with the sidebar. He wishes for the sidebar to extend all the way down to the bottom of the page rather than just the visible portion within the browser window. You can view the ...
Is there a way to create multiple diagonal lines within a rectangle using CSS and HTML from the start? I am interested in incorporating diagonal lines at the onset of the rectangle. Here is an example code that displays the rectangle: <div className={ ...
Using implicit width, which involves adding padding to an element containing text to give the parent container a specific but unstated width, can be quite elegant. However, it poses challenges when it comes to transitions. Is there a way to achieve a trans ...
Although this question has been asked previously, I am facing challenges in getting it to work for my specific scenario. My objective is to showcase a menu bar with a search option and inline text to its left. However, when I attempt to float both elements ...