I can't figure it out how I can fix this problem with hover effect on image with a href.
so I made 2 types of different codes. in the first image the hover effect perfect match the size of the box:
The second image not. (In the code the image 1 it's set as image background, the second one as image)
Also, if i resize the screen (mobile phone screen), the size of the first image became so little.
Can anybody help me with this code? I need only one example so I can do the same for the other a href images.
This is the code:
body {
margin: 0;
}
img {
width: 100%;
height: auto;
}
.gallery {
margin: 0 0.65rem;
}
.gallery-item {
height: auto;
margin: 0.5rem;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media (min-width: 640px) {
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 300px);
grid-auto-flow: row dense;
}
.gallery-item:first-child {
grid-column: 1/4;
grid-row: span 1;
}
.gallery-item:nth-child(2),
.gallery-item:nth-child(3),
.gallery-item:nth-child(4) {}
.gallery-item:nth-child(5),
.gallery-item:nth-child(6) {
grid-column: 1/2;
border: 6px solid #333;
}
.gallery-item:nth-child(7) {
grid-column: 2/3;
grid-row: 3/5;
}
.gallery-item:nth-child(10) {
grid-column: 1/3;
}
.gallery-item:nth-child(11),
.gallery-item:nth-child(13) {
border: 6px solid #333;
}
}
#media (min-width: 960px) {
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, auto);
}
.gallery-item:first-child {
grid-column: 1/4;
grid-row: span 1;
}
.gallery-item:nth-child(2),
.gallery-item:nth-child(3),
.gallery-item:nth-child(4) {}
.gallery-item:nth-child(5),
.gallery-item:nth-child(6) {
grid-column: 1/2;
border: 6px solid #333;
}
.gallery-item:nth-child(7) {
grid-column: 2/3;
grid-row: 3/5;
}
.gallery-item:nth-child(10) {
grid-column: 1/3;
}
.gallery-item:nth-child(11),
.gallery-item:nth-child(13) {
border: 6px solid #333;
}
}
.product-1 {
background-image: url("https://cdn.shopify.com/s/files/1/0425/9040/4758/products/VK_SS21-14280robeshama_600x.jpg?v=1607788637");
}
.middle {
top: 50%;
left: 50%;
text-align: center;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery-item a {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.gallery-item a i {
color: rgba(255, 255, 255, 0.6);
font-size: 3rem;
z-index: 100;
padding: 1rem 1rem;
border: 2px solid rgba(255, 255, 255, .6);
border-radius: .4rem;
opacity: 0;
transition: opacity .5s;
}
.gallery-item a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .8);
opacity: 0;
transition: opacity .5s;
}
.gallery-item a:hover i,
.gallery-item a:hover::before {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Image Gallery </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<div class="gallery-item"><img src="https://i.postimg.cc/dtRS4K2L/brigitte-bardot-1-800x400.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/q7j09Dt0/schermata-2020-09-09-alle-18-35-19-1599669344.png"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/j5DN1qbT/4e3f95459e0ea75731c812c6bb5b2b98.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/2ySS4ZNn/okok.jpg" style="object-fit: contain"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/dresses/products/shama-white-dress" class="product-1">
<i class="middle">
<div class="text">Discover More</div>
</i>
</a>
</div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/dresses/products/short-boho-rich-dress">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/Schermata2021-04-19alle12.14.07_600x.png?v=1618827354">
<i class="middle">
<div class="text">Discover More</div>
</i>
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/kgSp097x/7af20cc13f08d23f6b56bbafcba9c894.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/hG6bcQMv/Brigitte-Bardot-beach-robe-red-straw-hat-1960s.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/JhZtHyMG/409debab4e6404f1ba9ccd2a0caf57d5.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/3xWrMtRX/port-saint-tropez-g08oplu.jpg"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/sunglasses/products/edith">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/PELLE_1-Modifica_600x.jpg?v=1618827011">
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/7LZvzWXt/A.jpg" style="object-fit: contain"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/shoes/products/bubbles-flats">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/dhdhdhdh_400x.jpg?v=1618408909">
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/bN5rw74C/6ac52adef5323f8859c853b6aeae2ebe.jpg"></div>
</div>
</body>
</html>
I've added: position: absolute; and removed left: 50%;
Properties like top, left etc has no effect when they are in static position (normal flow)
.middle {
position: absolute;
top: 50%;
text-align: center;
}
body {
margin: 0;
}
img {
width: 100%;
height: auto;
}
.gallery {
margin: 0 0.65rem;
}
.gallery-item {
height: auto;
margin: 0.5rem;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media (min-width: 640px) {
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 300px);
grid-auto-flow: row dense;
}
.gallery-item:first-child {
grid-column: 1/4;
grid-row: span 1;
}
.gallery-item:nth-child(2),
.gallery-item:nth-child(3),
.gallery-item:nth-child(4) {}
.gallery-item:nth-child(5),
.gallery-item:nth-child(6) {
grid-column: 1/2;
border: 6px solid #333;
}
.gallery-item:nth-child(7) {
grid-column: 2/3;
grid-row: 3/5;
}
.gallery-item:nth-child(10) {
grid-column: 1/3;
}
.gallery-item:nth-child(11),
.gallery-item:nth-child(13) {
border: 6px solid #333;
}
}
#media (min-width: 960px) {
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, auto);
}
.gallery-item:first-child {
grid-column: 1/4;
grid-row: span 1;
}
.gallery-item:nth-child(2),
.gallery-item:nth-child(3),
.gallery-item:nth-child(4) {}
.gallery-item:nth-child(5),
.gallery-item:nth-child(6) {
grid-column: 1/2;
border: 6px solid #333;
}
.gallery-item:nth-child(7) {
grid-column: 2/3;
grid-row: 3/5;
}
.gallery-item:nth-child(10) {
grid-column: 1/3;
}
.gallery-item:nth-child(11),
.gallery-item:nth-child(13) {
border: 6px solid #333;
}
}
.product-1 {
background-image: url("https://cdn.shopify.com/s/files/1/0425/9040/4758/products/VK_SS21-14280robeshama_600x.jpg?v=1607788637");
}
.middle {
position: absolute;
top: 50%;
text-align: center;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery-item a {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.gallery-item a .middle {
color: rgba(255, 255, 255, 0.6);
font-size: 3rem;
z-index: 100;
padding: 1rem 1rem;
border: 2px solid rgba(255, 255, 255, .6);
border-radius: .4rem;
opacity: 0;
transition: opacity .5s;
}
.gallery-item a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .8);
opacity: 0;
transition: opacity .5s;
}
.gallery-item a:hover .middle,
.gallery-item a:hover::before {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Image Gallery </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<div class="gallery-item"><img src="https://i.postimg.cc/dtRS4K2L/brigitte-bardot-1-800x400.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/q7j09Dt0/schermata-2020-09-09-alle-18-35-19-1599669344.png"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/j5DN1qbT/4e3f95459e0ea75731c812c6bb5b2b98.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/2ySS4ZNn/okok.jpg" style="object-fit: contain"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/dresses/products/shama-white-dress" class="product-1">
<div class="middle">
<i class="text">Discover More</i>
</div>
</a>
</div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/dresses/products/short-boho-rich-dress">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/Schermata2021-04-19alle12.14.07_600x.png?v=1618827354">
<div class="middle">
<i class="text">Discover More</i>
</div>
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/kgSp097x/7af20cc13f08d23f6b56bbafcba9c894.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/hG6bcQMv/Brigitte-Bardot-beach-robe-red-straw-hat-1960s.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/JhZtHyMG/409debab4e6404f1ba9ccd2a0caf57d5.jpg"></div>
<div class="gallery-item"><img src="https://i.postimg.cc/3xWrMtRX/port-saint-tropez-g08oplu.jpg"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/sunglasses/products/edith">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/PELLE_1-Modifica_600x.jpg?v=1618827011">
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/7LZvzWXt/A.jpg" style="object-fit: contain"></div>
<div class="gallery-item">
<a href="https://ali-da.com/collections/shoes/products/bubbles-flats">
<img src="https://cdn.shopify.com/s/files/1/0425/9040/4758/products/dhdhdhdh_400x.jpg?v=1618408909">
</a>
</div>
<div class="gallery-item"><img src="https://i.postimg.cc/bN5rw74C/6ac52adef5323f8859c853b6aeae2ebe.jpg"></div>
</div>
</body>
</html>
Related
I created blazor calendar component which consists of two parts Header and weekview components. The component flex lines go beyond the component itself and I could not figure out Why? I have attached a screenshot of the issue.
Header (Calendar Component) code
<div class="maincontainer">
<div class="viewtitle">Augest 2022</div>
<div class="lbuttons">
<button class="button"><</button>
<button class="button">></button>
<button class="button">Today</button>
</div>
<div class="mbuttons">
<label class="datelabel">Monady, Augest 21, 2022</label>
<input class="dateinput" type="datetime-local" id="schedule-time"
name="schedule-time" value="2022-06-12T19:30"
min="2022-06-07T00:00" max="2022-06-14T00:00">
<input class="button" type="button" id="btnsubmit" value="Submit">
</div>
<div class="rbuttons">
<button class="button" #onclick="#(() => DayView_Click())" #onclick:stopPropagation="true">Day</button>
<button class="button" #onclick="#(() => WeekView_Click())" #onclick:stopPropagation="true">Week</button>
<button class="button" #onclick="#(() => MonthView_Click())" #onclick:stopPropagation="true">Month</button>
</div>
</div>
#switch (CurrentView)
{
case CalendarViewOption.MonthView:
<MonthViewComponent></MonthViewComponent>
break;
case CalendarViewOption.DayView:
<DayViewComponent></DayViewComponent>
break;
case CalendarViewOption.WeekView:
<WeekViewComponent></WeekViewComponent>
break;
}
CSS
body {
margin: 0;
padding: 0;
}
.maincontainer {
background: #E7EAF6;
display: grid;
grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
grid-template-rows: auto
}
.viewtitle {
grid-column: 1/4;
grid-row: 1;
justify-self: center;
padding: 5px 5px 5px 5px;
color: darkblue;
font-weight: bold;
font-size: 16px;
}
.lbuttons {
grid-column: 1/2;
grid-row: 2;
justify-self: start;
}
.mbuttons {
grid-column: 2/3;
grid-row: 2;
justify-self: center;
}
.rbuttons {
grid-column: 3/4;
grid-row: 2;
justify-self: end;
}
.button {
background-color: black;
color: white;
border: 2px solid #555555;
padding: 3px;
margin: 0;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: white;
color: black;
}
.datelabel {
color: black;
font-weight: bold;
}
.dateinput {
padding: 3px 3px;
margin: 2px 0;
border: 1px solid rgb(130, 128, 128);
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
}
WeekView
<div class="calendar-container">
<div class="header">
<ul class="weekdays">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="daynumbers">
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
</ul>
</div>
<div class="timeslots-container">
<ul class="timeslots">
<li>8<sup>am</sup></li>
<li>9<sup>am</sup></li>
<li>10<sup>am</sup></li>
<li>11<sup>am</sup></li>
<li>12<sup>pm</sup></li>
<li>4<sup>pm</sup></li>
<li>5<sup>pm</sup></li>
<li>6<sup>pm</sup></li>
<li>7<sup>pm</sup></li>
<li>8<sup>pm</sup></li>
<li>9<sup>pm</sup></li>
<li>10<sup>pm</sup></li>
</ul>
</div>
<div class="event-container">
<div class="slot slot-1">
<div class="event-staus"></div>
<span>Event A</span>
</div>
<div class="slot slot-2" style="height: 60px; grid-row: 1; grid-column: 1;">
<div class="event-staus"></div>
<span>Event A</span>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
.calendar-container {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: auto;
gap: 1px 1px;
grid-template-areas:
". header"
"timeslots-container main";
background: #325288;
}
.weekdays,
.daynumbers {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.daynumbers {
min-height: 1em;
}
.weekdays {
background: #19456B;
color: white
}
.header {
background-color: gainsboro;
grid-area: header;
}
.timeslots-container {
background-color: lightgray;
grid-area: timeslots-container;
align-items: center;
}
.timeslots {
display: flex;
flex-direction: column;
align-items: center;
}
.timeslots li {
min-height: 60px;
}
.timeslots li::after {
content: "";
position: absolute;
left: 10px;
width: 100%;
height: 1px;
background: lightgray;
z-index: 1;
}
.event-container {
display: grid;
grid-template-columns: repeat(7, auto);
grid-template-rows: repeat(48, auto);
grid-area: main;
position: relative;
}
.slot {
position: absolute;
background: darkcyan;
border-radius: 5px;
z-index: 5;
color: white;
font-size: 12px;
}
.slot-1 {
height: 30px;
grid-row: 106;
grid-column: 3;
}
Screenshot
Your issue is with:
.timeslots li::after {
content: "";
position: absolute;
left: 10px;
width: 100%;
height: 1px;
background: lightgray;
z-index: 1;
}
setting it to left: 10px is a mistake and why its causing your code to look like this, because technically it is taking left: 10px on the entire page. You need to set it so that it does not overlap the li element by setting it to relative so it stays inside.
So I have done a few changes to your css.
First I added this css:
.calendar-container {
overflow: hidden;
}
Then I set the li elements to relative:
.timeslots li {
position: relative;
}
then I adjusted your li::after css:
.timeslots li::after {
left: 0px;
width: 3000px;
}
this should solve your problem since the ::after now stays inside the li and not the entire page, and the overflow: hidden hides any overflow that causes side-scroll.
My 3x3 grid is not scaling as it should. Box 1, 5 and 9 contain some form of text, and the rest of them are pictures. When scaling down, the box with photos are displaying an excessive amount of white, and the ones with text are displaying an excessive amount of blue. I have no idea what is causing this to happen.
I am also looking for a way to center my text in its designated squares. Left aligned, but still centered. I have no idea how to apply both.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
grid-auto-rows: 1fr;
text-align: left;
color: white;
font-size: 14px;
font-family: Open Sans, sans-serif;
}
/* .grid>div {
background: #2b5eaf;
padding: 1em;
} */
/* .grid>div:nth-child(odd) {
background: #2b5eaf;
} */
.box-1,
.box-5,
.box-9 {
background: #2b5eaf;
color: white;
}
.button {
border: none;
color: white;
padding: 16px 50px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 12px;
}
.group1 {
padding: 48px;
justify-content: center;
}
h1 {
font-size: 30px;
}
p {
font-size: 14px;
}
.box-5 {
display: flex;
flex-direction: column;
align-items: center;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
.photo>img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
.photo {
width: 100%;
height: auto;
}
/* TABLET VIEW */
#media only screen and (min-width: 759px) and (max-width: 1279px) {
.grid {
grid-template-columns: repeat(2, 1fr);
text-align: left;
grid-gap: 0;
}
.grid>div {
height: 100%;
}
.box-2,
.box-6,
.box-7 {
display: none;
}
.box-8 {
grid-column: 2;
grid-row: 3;
}
.box-9 {
grid-column: 1;
}
h1 {
font-size: 24px;
}
}
/* MOBILE VIEW */
#media only screen and (max-width: 759px) {
.grid {
grid-template-columns: 1fr 1fr;
text-align: left;
grid-gap: 0;
}
.box-1 {
grid-row: 3;
grid-column: 1/3;
}
.box-2 {
grid-row: 2;
grid-column: 1;
}
.box-3 {
grid-row: 2;
grid-column: 2;
}
.box-5 {
grid-row: 1;
grid-column: 1/3;
}
.box-7,
.box-8,
.box-9 {
display: none;
}
}
<div class="grid">
<!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
<div class="box-1">
<div class="group1">
<h1 class="quote" style="color:#ffffff" ;>"Lingerie is not about seducing men; It's about embracing womanhood"</h1><br><br>
<p style="color:#ffffff" ;>- Dita Von Teese</p>
</div>
</div>
<div class="box-2">
<img class="photo" src="https://i.imgur.com/p5IOrlS.png" alt="">
</div>
<div class="box-3">
<img class="photo" src="https://i.imgur.com/JKKqZjj.png" alt="">
</div>
<div class="box-4">
<img class="photo" src="https://i.imgur.com/pI3g39l.png" alt="">
</div>
<div class="box-5">
<h1 style="color:#ffffff" ;>Discover Something Sexy In You</h1>
<a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
</div>
<div class="box-6">
<img class="photo" src="https://i.imgur.com/2mVzhR6.png" alt="">
</div>
<div class="box-7">
<img class="photo" src="https://i.imgur.com/bIcsE4S.png" alt="">
</div>
<div class="box-8">
<img class="photo" src="https://i.imgur.com/LnUV9eF.png" alt="">
</div>
<div class="box-9">
<div class="group1">
<h1 style="color:#ffffff" ;>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the only subscription that gets unwrapped TWICE!"</h1><br><br>
<p style="color:#ffffff" ;>- Wendy S.</p>
</div>
</div>
</div>
flex and grid works wonderfully together. Simply add display: flex; to your photos (and use proper selectors - .photo > img is not a proper selector as they are the same element - use img.photo instead). Also use height: 100%; for them to scale properly.
On the boxes where you want to center the text, use flex and its properties align-items: center; to center vertically and justify-content: center; to center horizontally.
I haven't done any styling in the media-query, you can use the same logic as above if you want.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
grid-auto-rows: 1fr;
text-align: left;
color: white;
font-size: 14px;
font-family: Open Sans, sans-serif;
}
/* .grid>div {
background: #2b5eaf;
padding: 1em;
} */
/* .grid>div:nth-child(odd) {
background: #2b5eaf;
} */
.box-1,
.box-5,
.box-9 {
background: #2b5eaf;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.button {
border: none;
color: white;
padding: 16px 50px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 12px;
}
.group1 {
padding: 48px;
justify-content: center;
}
h1 {
font-size: 30px;
}
p {
font-size: 14px;
}
.box-5 {
display: flex;
flex-direction: column;
align-items: center;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
img.photo {
display: flex;
object-fit: cover;
width: 100%;
height: 100%;
}
/*.photo {
width: 100%;
height: auto;
}*/
/* TABLET VIEW */
#media only screen and (min-width: 759px) and (max-width: 1279px) {
.grid {
grid-template-columns: repeat(2, 1fr);
text-align: left;
grid-gap: 0;
}
.grid>div {
height: 100%;
}
.box-2,
.box-6,
.box-7 {
display: none;
}
.box-8 {
grid-column: 2;
grid-row: 3;
}
.box-9 {
grid-column: 1;
}
h1 {
font-size: 24px;
}
}
/* MOBILE VIEW */
#media only screen and (max-width: 759px) {
.grid {
grid-template-columns: 1fr 1fr;
text-align: left;
grid-gap: 0;
}
.box-1 {
grid-row: 3;
grid-column: 1/3;
}
.box-2 {
grid-row: 2;
grid-column: 1;
}
.box-3 {
grid-row: 2;
grid-column: 2;
}
.box-5 {
grid-row: 1;
grid-column: 1/3;
}
.box-7,
.box-8,
.box-9 {
display: none;
}
}
</h1>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div class="grid">
<!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
<div class="box-1">
<div class="group1">
<h1 class="quote" style="color:#ffffff" ;>"Lingerie is not about seducing men; It's about embracing womanhood"</h1><br><br>
<p style="color:#ffffff" ;>- Dita Von Teese</p>
</div>
</div>
<div class="box-2">
<img class="photo" src="https://i.imgur.com/p5IOrlS.png" alt="">
</div>
<div class="box-3">
<img class="photo" src="https://i.imgur.com/JKKqZjj.png" alt="">
</div>
<div class="box-4">
<img class="photo" src="https://i.imgur.com/pI3g39l.png" alt="">
</div>
<div class="box-5">
<h1 style="color:#ffffff" ;>Discover Something Sexy In You</h1>
<a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
</div>
<div class="box-6">
<img class="photo" src="https://i.imgur.com/2mVzhR6.png" alt="">
</div>
<div class="box-7">
<img class="photo" src="https://i.imgur.com/bIcsE4S.png" alt="">
</div>
<div class="box-8">
<img class="photo" src="https://i.imgur.com/LnUV9eF.png" alt="">
</div>
<div class="box-9">
<div class="group1">
<h1 style="color:#ffffff" ;>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the only subscription that gets unwrapped TWICE!"</h1><br><br>
<p style="color:#ffffff" ;>- Wendy S.</p>
</div>
</div>
</div>
</body>
</html>
I'm trying to get the image to appear on the left with content on the right.
desired output would be:
my images on the below appear above the content. I've tried a number of things with the flex-direction but just can't get the image to appear on the left.
here's my cut down code, any suggestions would be greatly appreciated.
<style>html {
background: #f5f7f8;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
padding: 20px 0;
}
.band {
width: 90%;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}
#media only screen and (min-width: 500px) {
.band {
grid-template-columns: 1fr 1fr;
}
.item-1 {
grid-column: 1/ span 2;
}
.item-1 h1 {
font-size: 30px;
}
}
#media only screen and (min-width: 850px) {
.band {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/* card */
.card {
min-height: 100%;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
text-decoration: none;
color: #444;
position: relative;
top: 0;
transition: all .1s ease-in;
}
.card:hover {
top: -2px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}
.card article {
padding: 20px;
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column;
}
.card .thumb {
padding-bottom: 60%;
background-size: cover;
background-position: center center;
}
.card p {
flex: 1;
/* make p grow to fill available space*/
line-height: 1.4;
}
/* typography */
h1 {
font-size: 20px;
margin: 0;
color: #333;
}
.card span {
font-size: 12px;
font-weight: bold;
color: #999;
text-transform: uppercase;
letter-spacing: .05em;
margin: 2em 0 0 0;
}
</style>
<div class="support-grid"></div>
<div class="band">
<div class="item-4">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-5">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-6">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-7">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
</div>
Change flex-direction: column; to flex-direction: row; on card. Then you just have to define a width for thumb because you are using it as a background image. So I set width: 100%; to thumb.
html {
background: #f5f7f8;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
padding: 20px 0;
}
.band {
width: 90%;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}
#media only screen and (min-width: 500px) {
.band {
grid-template-columns: 1fr 1fr;
}
.item-1 {
grid-column: 1/ span 2;
}
.item-1 h1 {
font-size: 30px;
}
}
#media only screen and (min-width: 850px) {
.band {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/* card */
.card {
min-height: 100%;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
flex-flow: row;
text-decoration: none;
color: #444;
position: relative;
top: 0;
transition: all .1s ease-in;
}
.card:hover {
top: -2px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}
.card article {
padding: 20px;
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column;
}
.card .thumb {
padding-bottom: 60%;
background-size: cover;
background-position: center center;
}
.card p {
flex: 1;
/* make p grow to fill available space*/
line-height: 1.4;
}
/* typography */
h1 {
font-size: 20px;
margin: 0;
color: #333;
}
.card span {
font-size: 12px;
font-weight: bold;
color: #999;
text-transform: uppercase;
letter-spacing: .05em;
margin: 2em 0 0 0;
}
.thumb {
width: 100%;
}
<div class="support-grid"></div>
<div class="band">
<div class="item-4">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-5">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-6">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-7">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
</div>
Start by focusing on these two areas:
In your code, the flex container is set to flex-direction: column. This makes your image and the article (i.e., the flex items) stack vertically. Remove this column setting so that the items can line up in a row (which is the default setting).
The flex container will work better if you render the item with HTML (using the img tag) as opposed to CSS (using the background-image property). It will work even better if you wrap the img in a figure, div or other HTML element, as images seem to be problematic for some browsers when they're flex items. The common solution is to make the wrapper a flex item.
.card {
display: flex;
/* flex-direction: column; */
}
div {
width: 200px;
}
img {
width: 100%;
height: auto;
}
.card article {
padding: 20px;
}
<a href="#" class="card">
<div>
<img src="https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg">
</div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
Setting the .card class flex-direction to this:
.card {
flex-direction: row;
}
and adding: flex: 1 0 1%; width:1%; to article and .thumb should get you started.
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed last year.
i want to set z-index -999 in the green small rectangle that be set it behind the glass card but it dose not work. i have position rel and abs in my code and i rellay confiusing about this that why it is not work!
.second-card::before {
content: '';
display: inline-block;
width: 5rem;
height: 2rem;
background-color: #82c91e;
border-radius: 2px;
position: absolute;
top: -5%;
left: 50%;
transform: translateX(-50%);
z-index: -999;
}
i use before for that.
https://jsfiddle.net/9do7hpnx/1/
The issue is that you are trying to hide the green rectangle from its parent , you cant do that , because when you apply z index to the parent , it gets applied to the child also ( ie the green rectangle ) to solve this issue create another div which is not a child of the blurred div like
here is a working demo
https://jsfiddle.net/mcshjxqt/1/
code
<!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">
<link rel="stylesheet" href="style.css">
<title>Payment</title>
</head><!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">
<link rel="stylesheet" href="style.css">
<title>Payment</title>
</head>
<body>
<div class="payment-container">
<div class="payment-content">
<div class="container-content">
<h2 class="payment-title">Checkout</h2>
<p class="payment-timer">
<span class="timer-txt">0</span>
<span class="timer-txt">1</span>
<span class="timer-semicolumn">:</span>
<span class="timer-txt">1</span>
<span class="timer-txt">9</span>
</p>
</div>
</div>
<div class="payment">
<div class="card">
<div class="main-card">
<div class="main-card--top">
<div class='greenBg'>
</div>
<div class="second-card">
<div class="second-card--logo">
<img src="img/logo.png" alt="logo" class="logo-img">
</div>
<div class="second-card--content">
<div class="second-card--txt">
<p class="card-name">Benjamin Taylor</p>
<div class="card-name--details">
<span class=""></span>
</div>
</div>
<div class="second-card--icon">
<p class="second-card--date">
12 / 05
</p>
<ion-icon class="sec-icon-wifi" name="wifi-outline"></ion-icon>
</div>
</div>
</div>
<div class="main-card--content">
<div class="main-card--order">
<p class="order-title">order</p>
<p class="order-number">4239421</p>
</div>
<div class="main-card--product">
<p class="product-title">product</p>
<p class="product-name">reels on rails</p>
</div>
<div class="main-card--vat">
<p class="vat-title">vat (<span class="vat-per">10</span>%)</p>
<p class="vat-price">Rp 25.000</p>
</div>
</div>
</div>
<div class="main-card--bottom">
<div class="main-card--total">
<div class="total-price--content">
<p class="total-title">total</p>
<div class="total-price">
<p class="total-price-sym">Rp</p>
<p class="totla-price-pay">2.256.100</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pay">2</div>
</div>
</div>
<!-- JavaScript -->
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500;600;700&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 62.5%;
}
body {
min-height: 100vh;
font-size: 1rem;
background-color: #212529;
color: #fff;
}
/* ================== Payment container ================== */
.payment-container {
max-width: 100rem;
margin-inline: auto;
}
/* ================== Payment content ================== */
.payment-content {
display: grid;
grid-template-columns: 1fr 2fr;
padding: 3.2rem;
}
.payment-title {
font-weight: 600;
font-size: 2rem;
}
.container-content {
grid-column: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ================== Payment timer ================== */
.payment-timer {
display: flex;
align-items: center;
gap: .5rem;
}
.timer-txt {
width: 3.2rem;
height: 3.2rem;
font-size: 2rem;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
/* ================== Payment ================== */
.payment {
display: grid;
grid-template-columns: 1fr 2fr;
}
/* ================== Card ================== */
.main-card {
background-color: #313538;
width: 90%;
margin-inline: auto;
}
.main-card--content {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.main-card-container--content {
width: 70%;
margin-inline: auto;
}
.second-card {
background: rgba(255, 255, 255, 0.25);
border-radius: 5px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 5px solid #94d82d;
min-height: 20rem;
transform: translateY(-60px);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.main-card--top {
width: 75%;
margin-inline: auto;
position: relative;
z-index: 999;
}
.second-card--logo {
margin-block: 4rem;
text-align: center;
}
.logo-img {
width: 6.4rem;
}
.sec-icon-wifi {
color: #fff;
width: 2rem;
height: 2rem;
}
.second-card--content {
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.card-name {
font-size: 1.4rem;
margin-block: 5px;
}
.card-name--details {
font-size: 1.2rem;
}
.second-card--icon {
display: flex;
justify-content: space-around;
align-items: center;
margin-block: 1rem;
}
.second-card--txt {
text-align: center;
margin-top: 2rem;
}
.order-title,
.product-title,
.vat-title {
color: #8a8a8a;
}
.main-card--bottom {
background-color: #525353;
padding: 2rem 3rem;
position: relative;
}
.main-card--bottom::before {
content: '';
display: block;
width: 3rem;
height: 3rem;
background: #212529;
border-radius: 50%;
position: absolute;
top: -20%;
left: -5%;
}
.main-card--bottom::after {
content: '';
display: block;
width: 3rem;
height: 3rem;
background: #212529;
border-radius: 50%;
position: absolute;
top: -20%;
right: -5%;
}
.total-price--content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.total-title {
text-align: right;
text-transform: uppercase;
font-weight: 600;
}
.total-price-sym {
font-weight: 700;
}
.totla-price-pay {
font-size: 1.2rem;
font-weight: 700;
}
.total-price {
display: flex;
justify-content: space-between;
}
.greenBg::before {
content: '';
display: inline-block;
width: 5rem;
height: 2rem;
background-color: #82c91e;
border-radius: 2px;
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
z-index: -999;
}
I have code like this.
* {
margin: 0;
}
.wrapper {
width: 300px;
height: 300px;
border: 3px solid red;
display: flex;
flex-wrap: wrap;
}
.wrapper>div {
min-width: calc(300px/3);
}
.child1 {
background: blue;
}
div.child2 {
background: green;
min-width: calc(300px - 300px/3);
}
div.child3 {
background: yellow;
min-width: calc(300px - 300px/2);
}
div.child4 {
background: purple;
border: 4px gold dashed;
box-sizing: border-box;
min-width: calc(300px - 300px/2);
}
<div class="wrapper">
<div class="child1">
</div>
<div class="child2">
</div>
<div class="child3">
</div>
<div class="child4">
</div>
</div>
I want to override the flex container border of the flex child element with the border and background-color bordering the flex container.
Also, when a dotted line such as dash is used for the border here, I want to show the border of the flex container transparent below the dotted line.
I thought negative margin was the only way to do this, but it didn't work.
* {
margin: 0;
}
.wrapper {
width: 300px;
height: 300px;
border: 3px solid red;
display: flex;
flex-wrap: wrap;
}
.wrapper>div {
min-width: calc(300px/3);
}
.child1 {
background: blue;
margin-left: -3px;
margin-top: -3px;
}
div.child2 {
background: green;
min-width: calc(300px - 300px/3);
}
div.child3 {
background: yellow;
min-width: calc(300px - 300px/2);
}
div.child4 {
background: purple;
border: 4px gold dashed;
box-sizing: border-box;
min-width: calc(300px - 300px/2);
margin-right: -3px;
margin-bottom: -3px;
}
<div class="wrapper">
<div class="child1">
</div>
<div class="child2">
</div>
<div class="child3">
</div>
<div class="child4">
</div>
</div>
How can I achieve this?
This code may help you to solve your problem. you can play with z-index property.
* {
margin: 0;
}
.wrapper {
width: 300px;
height: 300px;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
position:relative;
}
.wrapper:after {
content:"";
width:100%;
height:100%;
display:block;
position:absolute;
border:4px solid red;
box-sizing:border-box;
z-index:4;
}
.wrapper>div {
}
.child1 {
background: blue;
grid-column: span 1;
grid-row: span 2;
position:relative;
z-index:1;
}
div.child2 {
background: green;
grid-column: span 3;
grid-row: span 2;
position:relative;
z-index:2;
}
div.child3 {
background: yellow;
grid-column: span 2;
grid-row: span 2;
position:relative;
z-index:3;
}
div.child4 {
background: purple;
border: 4px gold dashed;
grid-column: span 2;
grid-row: span 2;
position:relative;
z-index:5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="child1">
</div>
<div class="child2">
</div>
<div class="child3">
</div>
<div class="child4">
</div>
</div>
</body>
</html>