https://i.sstatic.net/Lbc0h.jpg
Can you provide instructions on how to achieve the design of this card using css?
https://i.sstatic.net/Lbc0h.jpg
Can you provide instructions on how to achieve the design of this card using css?
Here's a creative CSS solution for your issue:
Feel free to customize the img element
Try running the code snippet provided below
#parent {
position: relative;
height: 250px;
width: 300px;
}
img {
height: auto;
width: 200px;
position: absolute;
bottom: 0;
right: 0;
}
#box {
position: absolute;
width: 100%;
height: 100px;
background-color: #75d6e9;
bottom: 0;
border-radius: 20px;
display: flex;
align-items: center;
}
#box p {
margin-left: 25px;
font-size: 25px;
font-family: sans-serif;
font-weight: bold;
color: #FFF;
}<div id="parent">
<div id="box">
<p>Fashion</p>
</div>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpngimg.com%2Fuploads%2Fthinking_woman%2Fthinking_woman_PNG11638.png&f=1&nofb=1" alt="">
</div>Hopefully this provides insight into its operation.
This design can be made more responsive, but the focus here is on the concept rather than responsiveness.
It seems that the tag bootstrap was included, suggesting that you are utilizing it in your project. To achieve a complete effect, I utilized some bootstrap classes to create the fundamental card structure and adjusted the image positioning with a negative margin.
https://i.sstatic.net/06R9H.png
Take a look at the DEMO provided below.
.card-wrapper {
width: 400px;
padding-top: 100px;
margin: 0 auto;
}
.card-body img {
margin-top: -100px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4b484a5948780d16091609">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-wrapper">
<div class="card bg-info rounded">
<div class="card-body d-flex justify-content-between align-items-center">
<h3 class="text-white mb-0">Fashion</h3>
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
</div>one image that includes a blue box, woman, text, and white background all together
Use CSS to position a blue box with text, and overlay a transparent woman image on top
Utilize a transparent woman image as the top layer with another image (blue box and text) as the background-image
My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...
Is there a way to dynamically generate div elements while looping through a JSON array? I have various data items that I need to display in separate thumbnails within a row. I am looking for a template structure like the following: for(var i = 0; i < ...
I need assistance to modify my code so that it will have the following appearance: I successfully created a navigation bar icon and inserted the logo, but I am struggling to position the data above the navigation icon: My current code: <nav class="n ...
I need an answer that utilizes only CSS, without any JavaScript. In a form, I have a checkbox as follows: <label for="autologin">Remember Me</label> <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> <d ...
Exploring the world of Material UI within React for the first time has been an exciting journey. I am currently looking to customize my global theme, specifically targeting two classes: .MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover { ...
At the moment, I am utilizing an HTML textarea attribute to collect input from users and then displaying that text back to them formatted. However, there seems to be an issue with how it handles tabs. For instance, when attempting to input the following: ...
I'm currently facing an issue with my email contact form. The submit button is styled perfectly on desktop, but on mobile, the padding and border-radius are not being applied. I attempted to switch to EM units from pixels, but still no luck. You can v ...
After successfully displaying my HighCharts half-doughnut with hard-coded data, I ran into a problem when trying to fetch data from the database. The slight delay in loading the data caused an issue where a "Chart title" and a white box would appear on the ...
Can someone help me learn how to display two modals on the same screen, one on the left and one on the right? I am new to bootstrap and would appreciate some guidance! ...
Utilizing Material UI's SwipeableDrawer component, I have successfully created a bottom drawer with a fixed action button container. The container is positioned using position: fixed; bottom: 0;. While this setup works effectively on desktop browsers, ...
Is there a way to keep the last div (class) from sliding underneath? I applied margin-right to .artist_wrap. I assumed that using overflow: hidden would contain it within #music_videos_wrap, but it just disappears. Any assistance is greatly appreciated. H ...
Here is a demonstration of the scenario in JSFiddle I have made updates to the JSFiddle demonstration here: http://jsfiddle.net/x11joex11/r5spu85z/8/. This version provides more detailed insight into how the sticky footer functions well, albeit with a hei ...
When a user is not logged in, the header displays a logo and a login form that requires ample space. Once the user logs in, the full navigation menu appears in a smaller header size. To achieve this, adjusting the height:auto property of the "site-header" ...
Help Needed with HTML Lists! <li>A.</li> <li><a href="#">B.</a></li> <li><a class=tr href="#">C.</a></li> <li class=tr>D.</li> <li class=notr>E.</li> I am trying to selec ...
My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...
One of the features on my website includes 3 blocks with buttons. These buttons trigger a change in the displayed picture when clicked. However, it is crucial to ensure that when a new track is activated, the previous button returns to its original state. ...
I am attempting to display another set of options when the user selects a specific item. For example, if the user selects "Products," then a new selection box should appear with different product types. See my code below: <html> <head> <m ...
The CSS specification dictates that line-height should be implemented by dividing the specified value by two and applying the result both above and below a line of text. This significantly differs from the traditional concept of leading, where spacing is ...
One thing I really enjoy is how Emmet can generate HTML using 'CSS-like' strings. However, I prefer not to use their CSS Abbreviations. For example, when I write the following line of CSS: li a| I expect to get a tab when I press 'TAB&apos ...
My MySQL code is functioning perfectly, and I have created a custom shortcode to embed the content within a post. However, I am facing an issue where the shortcode is executing below the footer. Initially, I suspected it was a problem with a plugin or them ...