I would like to frame the picture in this way, but I do not know what is wrong with the code, that the bottom part of the border is thicker than the top (red border) link to the view
[1]: https://i.stack.imgur.com/quFZn.jpg
Code:
.image {
flex: 1 1 40rem;
position: relative;
&::before,
&::after {
content: '';
position: absolute;
z-index: -1;
background: $red;
height: 25rem;
width: 25rem;
}
&::before {
top: 0;
left: 0;
}
&::after {
bottom: 0;
right: 0;
}
img {
width: 100%;
padding: .5rem;
}
}
the idea here is two create two divs and put the them behind the image (responsively using position)
just change the --outside-value var for creating bigger border or smaller
with the var in * selector is equal in all two borders :)
hope this helps, good coding!
here the code
* {
--outside-value: -0.2em;
}
html,
body {
height: 100%;
}
body,
#content {
display: flex;
justify-content: center;
align-items: center;
}
#content {
position: relative;
}
#content img {
width: 50vw;
z-index: 1;
}
.border {
width: 30vw;
height: 10vh;
position: absolute;
background-color: red;
}
.border-bottom {
top: var(--outside-value);
left: var(--outside-value);
}
.border-top {
position: absolute;
bottom: var(--outside-value);
right: var(--outside-value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<div class="border border-top"></div>
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg">
<div class="border border-bottom"></div>
</div>
</body>
</html>
Related
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="../img/sec1.png" alt="">
</div>
<div class="boxss"></div>
</div>
</header>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("../img/logo.png") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
I don't know why css-mediaquery does't working.
.imgbox tag doesn't work only in (max-width: 768px)
I know that under line code work in prority.
What should I do?
1.
I input img tag(html tag) in imgboxd(html tag)
2.
use imgboxd only,
input img link in imgboxd (css)
But, 2 kinds method does not working
Use the same selector in your media query
I noticed you didn't use the same CSS selector for the image inside your media query.
What you wrote outside the media query was this:
header .background .imgboxd img
In your media query in the question you have this:
header .imgboxd img
But you have to use the same selector both times.
Also see CSS Specificity
See working snippet below:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("https://picsum.photos/54/68") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .background .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="https://picsum.photos/seed/so/1200/960" alt="">
</div>
<div class="boxss">Example text</div>
</div>
</header>
</body>
</html>
I have 2 blocks that are each 50% of the page width. When I hover one of these 2 blocks, it then takes up 95% of the page and must go over the second (hence the increase in the z-index on hover).
When I switch my cursor from one block directly to another, we notice that from a certain point, the animation of the width is overwritten by the change of the z-index.
I'm looking for a solution to make the animation take priority over the width, not the z-index, smoother effect and ideally without using javascript.
Here is my code:
HTML :
<div class="page-wrap">
<div class="horizontal__reveal">
<div class="horizontal__reveal__block horizontal__reveal__block-left">
</div>
<div class="horizontal__reveal__block horizontal__reveal__block-right">
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html {
background: #000;
color: #fff;
}
.page-wrap {
height: 100vh;
width: 100vw;
}
.horizontal__reveal {
position: relative;
height: 100%;
width: 100%;
background: red;
}
.horizontal__reveal__block {
cursor: pointer;
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 100;
transition: all 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal__reveal__block:hover {
z-index: 200;
width: 95%;
}
.horizontal__reveal__block-left {
background: blue;
left: 0;
}
.horizontal__reveal__block-right {
background: green;
right: 0;
}
You can see it live here.
You can do that with omitting z-index when hover occurs. Instead you can use Adjacent Sibling Selector (+) in your CSS as the code below:
* {
margin: 0;
padding: 0;
}
html {
background: #000;
color: #fff;
}
.page-wrap {
height: 100vh;
width: 100vw;
}
.horizontal__reveal {
position: relative;
height: 100%;
width: 100%;
background: red;
}
.horizontal__reveal__block {
cursor: pointer;
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 100;
transition: all 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal__reveal__block:hover {
/*z-index: 200;*/
width: 95%;
}
.horizontal__reveal__block:hover + .horizontal__reveal__block {
width: 5%;
}
.horizontal__reveal__block-left {
background: blue;
left: 0;
}
.horizontal__reveal__block-right {
background: green;
right: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-wrap">
<div class="horizontal__reveal">
<div class="horizontal__reveal__block horizontal__reveal__block-left">
</div>
<div class="horizontal__reveal__block horizontal__reveal__block-right">
</div>
</div>
</div>
</body>
</html>
I have a header section that should wrap according to the header image. Every page has a different image so it must be responsive. However header section will not wrap with the image since it is absolutely positioned.
As you can see in the snippet the image has height: auto on it and just overflows outside of the parent. Is there anyway to make the parent wrap according to the image?
*, ::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#header::before, #hero.background-wrapper::before {
opacity: 0.2;
}
.background-wrapper::before {
content: '';
position: absolute;
background-color: #000;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .5;
z-index: 0;
}
#hero {
color: #fff;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 80px;
padding-bottom: 60px;
position: relative;
font-family: 'Montserrat', sans-serif;
z-index: 1;
}
.hero-content {
max-width: 911px;
justify-content: flex-start;
text-align: left;
}
.hero-content {
padding: 0;
position: relative;
display: flex;
}
.hero-text {
margin-top: 100px;
max-width: 750px;
}
.background-wrapper picture {
position: absolute;
height: auto;
width: 100%;
inset: 0;
z-index: -1;
aspect-ratio: auto;
}
.background-wrapper picture img {
position: absolute;
height: auto;
width: 100%;
top: 0;
left: 0;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="hero" class="background-wrapper">
<div class="container hero-content">
<div class="hero-text">
<h1>Header</h1>
<h2>Header description</h2>
</div>
</div>
<picture class="hero-picture">
<source srcset="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399.jpg.webp" media="(min-width: 600px)">
<img src="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399-450x300.jpg.webp" alt="landing image" decoding="“async”">
</picture>
</section>
</body>
</html>
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.
Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.
Hello I wanted to know if please can some one could help me to add one image called or loaded from css to a multiple images on html.
EXAMPLE:
Thanks in advance.
I think it will work for you
.image-wrap {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-wrap:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url(https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<div class="image-wrap">
<img src="https://picsum.photos/300/450" />
</div>
I think you are need something like this.
.fi
{
z-index: 1;
width: 100%;
}
.fi2
{
position:absolute;
top: 25px;
left: 45%;
z-index: 2;
width: 300px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="https://images.news18.com/ibnlive/uploads/2021/07/1627377451_nature-1600x900.jpg" class="fi" >
</div>
<img src="https://media.newyorker.com/photos/5a95a5b13d9089123c9fdb7e/2:2/w_3289,h_3289,c_limit/Petrusich-Dont-Mess-with-the-Birds.jpg" class="fi2">
</body>
</html>
Let me know if this helps you
Here is one thing you could do.
Make sure the image sample ( has no background color ). then give it the same size and postion as the image with the background. when thats done give the image sample and z-index of 1. which will push it above the other picture.
.image1
{
z-index: 1;
width: 100%;
}
.imge2
{
position:absolute;
top: 25px;
left: 45%;
z-index: 2;
width: 300px;
margin: auto;
}
hope this is the solution to your answer
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>