The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Correct css / html for image overlapping header.
JUI43555
post Jul 4 2023, 11:45 PM
Post #1


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
Hoping to get some advice on best practice for having an image overlapping or 'sticking out' of an element like the image below.

If there is a name of this type of thing please let me know.

IPB Image

https://picsum.photos/300 (if you need a placeholder)

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jul 5 2023, 05:42 AM
Post #2


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there JUI43555,

here is one possible solution...

HTML
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>
  <div id="container">
   <div>Lorem ipsum...</div>
   <div>Lorem ipsum...</div>
   <img src="https://picsum.photos/300" alt="">
  </div>
</body>
</html>


screen.css
CODE

* {
   box-sizing: border-box;
}
body {
   font: normal 1em / 1.5em  sans-serif;
   background-color: #f9f9f9;
}
#container {
   position: relative;
   width: clamp( 16em, 60vw, 60em );
   margin: auto;
   border: 2px solid #000;
   background-color: #fff;
}
#container div {
   height: 25.3vw;
   padding: 1em;
   overflow: auto;
}
#container div:first-of-type {
   height: 12.6vw;
   border-bottom: 2px solid #000;
   background-color: #b5e51d;
}
#container img {
   position: absolute;
   left: 50%;
   top: 10%;
   max-width: 33.3%;
   height: auto;
   transform: translate(-50%, 0 );
   border: 2px solid #000;
}


View the example here...
https://codepen.io/coothead/full/MWzvmPw


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Jul 5 2023, 07:32 AM
Post #3


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
QUOTE(coothead @ Jul 5 2023, 06:42 PM) *

Hi there JUI43555,
[indent]
here is one possible solution...


Interesting, thanks. I'll look into clamp, that's a new one to me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 5 2023, 07:37 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(JUI43555 @ Jul 5 2023, 06:45 AM) *

Hoping to get some advice on best practice for having an image overlapping or 'sticking out' of an element like the image below.

Does the image stick out of (or into) the green area? What other content is there on the page, especially above and below the image (and maybe on its sides)? The important thing is that the image doesn't obscure such other content...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Jul 5 2023, 08:03 AM
Post #5


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
my bad, i meant best css practice. essentially i'm looking to tackle this.

IPB Image

working out how to get the css to make the phone over the top like that. Presuming it was a z-index with some sort of minus value margin etc.

Then it would give me a better idea as to how to accomplish this overlap.

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jul 5 2023, 08:57 AM
Post #6


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
QUOTE(JUI43555 @ Jul 5 2023, 02:03 PM) *

my bad, i meant best css practice. essentially I'm looking to tackle this.


Perhaps Hide and Show might be a solution...

HTML
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>
  <input id="cb" type="checkbox">
  <label for="cb" id="image-control">image</label>
  
  <div id="container">
   <div>Lorem ipsum...</div>
   <div>Lorem ipsum...</div>
   <img src="https://picsum.photos/300" alt="">
  </div>

</body>
</html>


screen.css
CODE

* {
   box-sizing: border-box;
}
body {
   font: normal 1em / 1.5em  sans-serif;
   background-color: #f9f9f9;
}
#container {
   position: relative;
   width: clamp( 16em, 60vw, 60em );
   margin: auto;
   border: 2px solid #000;
   background-color: #fff;
}
#container div {
   height: 25.3vw;
   padding: 1em;
   overflow: auto;
}
#container div:first-of-type {
   height: 12.6vw;
   border-bottom: 2px solid #000;
   background-color: #b5e51d;
}
#container img {
   position: absolute;
   left: 50%;
   top: 10%;
   max-width: 33.3%;
   height: auto;
   transform: translate(-50%, 0 );
   border: 2px solid #000;
   box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.4 );
}
#cb {
   position: absolute;
   left: -999em;
}
#image-control {
   display: block;
   width: 8em;
   padding: 0.5em;
   margin:  1em auto;
   border: 1px solid #000;
   border-radius: 0.75em;
   background-image: linear-gradient( to bottom, #fff, #ccc );
   box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
   text-align: center;
   cursor: pointer;
}
#image-control::before {
   content: 'hide ';
}
#cb:checked ~ #container img {
   display: none;
}
#cb:checked + #image-control::before {
   content: 'show ';



View
https://codepen.io/coothead/full/MWzvmPw


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 5 2023, 12:01 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(JUI43555 @ Jul 5 2023, 03:03 PM) *

my bad, i meant best css practice. essentially i'm looking to tackle this.

IPB Image

The blue curve might be done with CSS3 border-radius. If the phone is in a IMG element, you call pull it up from below with a negative top margin, in front of the blue curve:

CODE
#top {
border-bottom: 100px solid blue;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}

#bottom {
text-align: center;
margin-top: -50px;
}

<div id="top"></div>

<div id="bottom"><img src="dog.jpg" width="300" height="200" alt="">
</div>

Or you could use a background image for the blue curve, with another background image or an IMG element for the phone. Or you could combine the phone and blue curve into a single image.

The curve radius may change depending on viewport width, not sure how to best avoid that.


QUOTE
Then it would give me a better idea as to how to accomplish this overlap.

IPB Image

The circle image could be a background image too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 02:06 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC