I need help creating a unique design with an image and text inside a div element. I am inspired by the look of and want to achieve something similar. I'm currently working with the Zerb Foundation Framework, and have attempted using position: absolute on the text, but it's causing some issues. Can anyone provide guidance on how to properly implement this design?
Imagine you have some example HTML code like this:
HTML
<div id="container">
<div id="content">
<h1>Here is some content</h1>
<p>Description of the product.
More information about the product.</p>
</div>
</div>
CSS
#container
{
background-image:url('http://image.made-in-china.com/2f0j00cZjaqNvWlEks/Men-T-Shirt.jpg');
background-repeat:no-repeat;
height:400px;
width:400px;
}
#content
{
position:absolute;
height:auto;
width:auto;
top:150px;
left:100px;
}
#content h1
{
color:Yellow;
font-weight:bold;
font-size:22px;
}
#content p
{
color:Red;
}
You can add a background-image to the main div #container, give the position of absolute to the nested div #content, and then use top and left properties to adjust its position as needed.
I hope this explanation is helpful.
Updated to set #container div's height and width to auto
After experimenting with both Carbon Design for React (@carbon/react) and Material UI (@mui/material) in conjunction with Next.js, I encountered styling issues with the components. While they functioned correctly to some extent, there were noticeable discr ...
On one of my websites, I have implemented a scroller. However, when I try to scroll using the down arrow and reach the end where the time is 10:00 PM, clicking the down arrow again causes the scroller to move up and disappear completely. I am looking for a ...
I'm currently working on a webpage that features before and after images using a slider based on mouse movement to display both pictures. I am trying to incorporate multiple sliders on the same page but have been facing difficulties in getting them to ...
Here is the current HTML structure: <div class="main-parent"> <div class="column-left"> <div class="1"> 1 </div> <div class="2"> 2 </div> </div> < ...
I am working on a hover effect for a button that should add a CSS class to a specific element. Despite having multiple elements, I only want the class added to one particular element. Here is my current code: $("ul.subnav").parent().append("<span> ...
How can I eliminate the specified text shown in the image? https://i.sstatic.net/174fD.png This widget is sourced from an external website. Is it possible to use javascript to wrap a around the text and then remove it using css? It's important to ...
I'm currently experimenting with the 960 grid css framework. How can I eliminate the space between two divs stacked on top of each other? [referring to the gap between the blue lines in the image] I created my CSS using the CSS generator found at . ...
Can someone help me achieve the same functionality as the Fiddle linked below? http://jsfiddle.net/6CR2H/1/ I have tried to replicate it by including both external files, but the image is not displaying as a pop-up when clicked. <link href="http:// ...
To enhance the answer provided in this post: How to stack divs without spaces and maintain order on smaller screens using Bootstrap I've been exploring ways to develop a jQuery script that dynamically adjusts the margin-top of div elements based on t ...
I have successfully implemented data filtering on my website using data-filter. While everything is working great, I am interested in displaying items with specific attributes upon loading. For instance, I want to load only green objects by default inste ...
Having an issue here Trying to make the website responsive and encountered a problem where the paragraph ( and the World's Biggest University Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus diam. Etia ...
I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...
On the PC version, I have three blocks that open and close perfectly when clicked. However, on the mobile version, when I click on one block, it opens but does not close unless I click on another block. Additionally, if I click again on the same block th ...
I have encountered an issue with a navigation bar on one of my website projects. The HTML elements I am trying to add afterwards are not aligning properly with the navbar. I have thoroughly checked for any open HTML tags, syntax errors, or conflicting CSS ...
Utilizing the ol element with column-count and column-gap properties to organize the list into 2 columns, each list item contains a span element floated right. However, I am encountering an issue where the span element is not displayed for certain items li ...
I'm currently learning React and faced a unique situation while working on projects. Here's the scenario - I have two React child components nested under a standard HTML element. If I need to target and style each individual React child element ...
I need to make a table more visually attractive by removing specific borders without affecting the overall design. After applying the border-collapse property, I attempted to remove the right border from certain cells using CSS. However, this unintentional ...
I'm struggling with making the image smaller and centering it while keeping its original size. I'm using Bootstrap and need a solution for this issue. How can I make the image centered and shown in its original size? <div class="contain ...
Hello everyone, I'm currently working on creating a carousel. I have used list items with images inside and am using scroll to navigate to a specific list item. However, when clicking on a thumbnail (let's say the 2nd one), it scrolls to the imag ...
In this scenario, the border is not surrounding the blue box but rather extends over the entire window height. Is there any advice on how to create a border around the blue box? Important Points: The HTML and body definitions cannot be altered. The pad ...