I'm trying to add some hover effects to my landing page and i'm stuck at doing the hover effect at the image, the hover in the title and author I was able to do easily.
I tried some stuff but I still couldn't do, the solutions that I saw here on stackoverflow was using position: absolute, but I was looking for some other solution (if there is).
If the main solution is using position: absolute and you want to please help me understand, I find very difficult to understand and use position: absolute.
Here's how my page look like right now
:root {
--soft-blue: hsl(215, 51%, 70%);
--cyan: hsl(178, 100%, 50%);
--main-bg: hsl(217, 54%, 11%);
--card-bg: hsl(216, 50%, 16%);
--line: hsl(215, 32%, 27%);
--white: hsl(0, 0%, 100%);
--font-size: 18px;
--font: 'Outfit', sans-serif;
}
body {
margin: 0;
font-family: var(--font);
}
.page {
display: flex;
height: 100vh;
background-color: var(--main-bg);
justify-content: center;
align-items: center;
}
.page__container {
box-sizing: border-box;
padding: 20px 20px 0px 20px;
background-color: var(--card-bg);
width: 400px;
height: 650px;
border-radius: 20px;
}
.page__container img {
margin: 0;
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.page__container h1 {
color: var(--white);
font-size: 26px;
margin: 15px 0 10px;
}
.page__container h1 a {
color: var(--white);
text-decoration: none;
}
.page__container .description {
margin: 0;
font-weight: 400;
color: var(--soft-blue);
font-size: 20px;
}
.price-deadline {
display: flex;
align-items: center;
justify-content: space-between;
}
.eth {
display: flex;
align-items: center;
}
.eth .eth-icon {
max-height: 18px;
max-width: 11px;
margin-right: 5px;
}
.eth .eth-price {
color: var(--cyan);
}
.deadline {
display: flex;
align-items: center;
}
.deadline .clock-icon {
max-width: 17px;
max-height: 17px;
margin-right: 5px;
}
.deadline .due-date {
font-weight: 600;
color: var(--soft-blue);
}
.divisor {
height: 1px;
background-color: var(--soft-blue);
border: none;
}
.author {
display: flex;
align-items: center;
padding-top: 10px;
}
.author .avatar {
border: 1px solid white;
border-radius: 50px;
max-height: 40px;
max-width: 40px;
margin-right: 10px;
}
.author .credits {
color: var(--soft-blue);
}
.author a {
font-size: 16px;
color: var(--white);
text-decoration: none;
}
/* Hover Section */
.author a:hover {
color: var(--cyan);
}
.text h1 .link:hover {
color: var(--cyan);
}
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght#300;400;600&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./images/favicon-32x32.png" type="image/x-icon">
<title>NFT Preview Card</title>
</head>
<body>
<div class="page">
<div class="page__container">
<img src="./images/image-equilibrium.jpg" alt="" class="equilibrium">
</p>
<div class="text">
<h1>Equilibrium #3429</h1>
<p class="description">
Our Equilibrium collection promotes
balance and calm.
</p>
<div class="price-deadline">
<div class="eth">
<img src="./images/icon-ethereum.svg" alt="" class="eth-icon">
<p class="eth-price">0.041 ETH</p>
</div>
<div class="deadline">
<img src="./images/icon-clock.svg" alt="" class="clock-icon">
<p class="due-date">3 days left</p>
</div>
</div>
</div>
<hr class="divisor">
<div class="author">
<img src="./images/image-avatar.png" alt="" class="avatar">
<p class="credits">
Creation of Jules Wyvern
</p>
</div>
</div>
</div>
</body>
</html>
i cannot think of another way without position: absolute
but i have created you an example where the the image is positioned automatically on the center using flex box https://jsfiddle.net/r5Lfcbh8/2/
Edit i use position relative on the parent div as relative make the children absolute top left 0 same as relative.
<div class="overlayPar">
<img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="equilibrium">
<div class="imgOverlay">
<span class="eye"></span>
</div>
</div>
.overlayPar {
position: relative;
}
.imgOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 255, 247, .4);
display: none;
}
.imgOverlay .eye {
background: white;
width: 25px;
height: 25px;
display: block;
margin: auto;
}
.overlayPar:hover .imgOverlay {
display: flex;
}
.equilibrium {
display: block;
}
Related
I am trying to improve my css skills by practicing making and cloning various projects , I was practicing this nft project from frontendmentor and faced this problem , A vertical scrollbar always appear on my web page and I don't know why is this happening , I have tried changing the height of my main container from 50% to 33% but the problem remains the same , I am attaching the code for your reference
#import url(https://fonts.google.com/specimen/Outfit);
:root {
--Soft-blue: hsl(215, 51%, 70%);
--Cyan: hsl(178, 100%, 50%);
--Very-dark-blue1: hsl(217, 54%, 11%);
--Very-dark-blue2: hsl(216, 50%, 16%);
--Very-dark-blue3: hsl(215, 32%, 27%);
--White: hsl(0, 0%, 100%)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--Very-dark-blue1);
color: var(--White);
font-family: "Outfit", sans-serif;
font-size: 18px;
}
.container {
width: 33%;
height: 50%;
margin: 3em auto;
overflow: hidden;
background-color: var(--Very-dark-blue2);
border-radius: 12px;
display: flex;
flex-direction: column;
text-align: left;
}
.nft {
width: 100%;
height: 40%;
border-radius: 12px;
}
.nft img {
width: 100%;
height: 100%;
padding: 2em;
border-radius: 12%;
}
h3.title-nft {
color: var(--White);
padding: 0 1.5em;
}
p.info {
color: var(--Soft-blue);
font-weight: 300;
padding: 1.75em;
letter-spacing: 0.1em;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
}
li {
padding: 1.75em;
}
li.eth {
color: var(--Cyan);
}
li.clock {
color: var(--Soft-blue);
}
hr {
width: 80%;
margin: 0 auto;
border-color: var(--Very-dark-blue3);
}
.footer {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 2em;
}
.footer img {
border-radius: 50%;
width: 3em;
border: 2px solid var(--White);
margin-right: 1.75em;
}
.footer p {
color: var(--Soft-blue);
}
.footer span {
color: var(--White);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css" />
<title>Frontend Mentor | NFT preview card component</title>
</head>
<body>
<div class="container">
<div class="nft">
<img src="images/image-equilibrium.jpg" />
</div>
<div class="main-content">
<h3 class="title-nft">Equilbirium #3429</h3>
<p class="info">Our Equilibirum collection promotes balance and calm</p>
<div class="side-details">
<ul>
<li class="eth">
<img src="images/icon-ethereum.svg" /> 0.041 ETH
</li>
<li class="clock">
<img src="images/icon-clock.svg" /> 3 Days Left
</li>
</ul>
</div>
</div>
<hr />
<div class="footer">
<img src="images/image-avatar.png" />
<p class="creator">
Creation of <span class="wrapper">Jules Wyvern </span>
</p>
</div>
</div>
</body>
</html>
I can't answer why, but container ignore height: 33%, and using 100% + border. This and create problem. You can try use 33vh.
So I'm relatively new to Css and trying to learn it by doing some projects , I'm almost through with this one , but the thing that I'm not getting right is that the image is not taking up the same height as that of the left div , why is this so , even though I have set the height of left container to be 100% of the main container
I'm attaching the code for your reference
#import url(https://fonts.google.com/specimen/Fraunces);
#import url(https://fonts.google.com/specimen/Montserrat);
:root {
--Dark-cyan: hsl(158, 36%, 37%);
--Cream: hsl(30, 38%, 92%);
--Very-dark-blue: hsl(212, 21%, 14%);
--Dark-grayish-blue: hsl(228, 12%, 48%);
--White: hsl(0, 0%, 100%)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
background-color: var(--Cream);
color: black;
}
.container {
background-color: var(--White);
width: 33%;
height: 33%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 4rem auto;
}
.left-side {
width: 50%;
background-size: cover;
background-position: center;
height: 100%;
overflow: hidden;
}
.left-side img {
width: 100%;
object-fit: cover;
}
.right-side {
width: 50%;
height: 100%;
padding: 2rem;
}
h5 {
font-family: "Montserrat", sans-serif;
font-weight: 500;
letter-spacing: 0.4rem;
color: var(--Dark-grayish-blue);
margin: 0 0 2em 0;
}
h1 {
font-family: "Fraunces", serif;
font-weight: 700;
letter-spacing: 0.07rem;
}
.content {
font-family: "Fraunces", serif;
font-weight: 500;
color: var(--Dark-grayish-blue);
margin: 1.75em 0;
line-height: 1.5;
}
.prices {
font-family: "Fraunces", serif;
display: inline;
margin: 0 0.5em;
}
.old-price {
text-decoration: line-through;
}
.new-price {
font-weight: 700;
color: var(--Dark-cyan);
}
.btn {
padding: 0.5em 1.8em;
background-color: var(--Dark-cyan);
color: var(--White);
width: 95%;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 1.75em 0 0 0;
}
.btn:hover {
opacity: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<section class="main-body">
<div class="container">
<div class="left-side">
<img src="https://images.unsplash.com/photo-1611915387288-fd8d2f5f928b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80">
</div>
<div class="right-side">
<h5>PERFUME</h5>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p class="content">A floral, solar and voluptous interpretation composed bu oliver polge,Perfumer-Creator for the house of chanel</p>
<div class="price">
<h1 class="new-price prices">$149.99</h1>
<p class="old-price prices">$169.99</p>
</div>
<button class="btn">
<i class="fa fa-shopping-cart" style="font-size:16px"></i> Add To Cart
</button>
</div>
</section>
</body>
</html>
.left-side{
width: 50%;
background-size: cover;
background-position: center;
height: 100%;
overflow: hidden;
}
.left-side img{
width:100%;
object-fit: cover;
Only thing i can think of is that you have given it two different properties, try combining these in the same css stack
.container {
/* ... */
align-items: stretch; /* Add this line */
}
.left-side {
/* ... */
height: 100%; /* <- Remove this line */
/* Add these two lines: */
min-height: 100%;
background-image: url("images/image-product-mobile.jpg");
}
Also, remove the <img /> from the left-side div; now it's on the CSS (.left-side), so you can cover and center the background.
Demo:
https://jsfiddle.net/adqb1v8r/
I'm currently stuck at this, its a picture:
I need both product-info and image heights to be the same, but for some reason using height: 100% in CSS desktop version doesn't works. Maybe giving card-component and especific height would work?. Also any suggestions to my code are welcomed, specifly with responsive design's stuff.
I'm new with CSS and I'm doing this for practice.
This is my HTML and CSS code:
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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 530px)">
<title>Product preview card component</title>
</head>
<body>
<main>
<div class="card-component">
<figure class="image-container">
<picture>
<source media="(min-width: 530px)" srcset="./images/image-product-desktop.jpg">
<img src="./images/image-product-mobile.jpg" class="card-component__image" alt="product image">
</picture>
</figure>
<div class="card-component__product-info">
<span>PERFUME</span>
<div class="card-component__product-description">
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>
A floral, solar and voluptuos
interpretation composed by Oliver
Polge, Perfumer-Creator for the House
of CHANEL.
</p>
</div>
<div class="card-component__price">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<button class="card-button">
<img src="./images/icon-cart.svg" alt="cart icon">
Add to Cart
</button>
</div>
</div>
</main>
</body>
</html>
CSS: Mobile
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--dark-cyan: hsl(158, 36%, 37%);
--cream: hsl(30, 38%, 92%);
--very-dark-blue: hsl(212, 21%, 14%);
--dark-grayish-blue: hsl(228, 12%, 48%);
--white: hsl(0, 0%, 100%);
}
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
main {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background-color: var(--cream);
}
.card-component {
width: 92.5%;
height: auto;
max-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
}
.card-component .image-container {
width: 100%;
height: auto;
}
.card-component .card-component__image {
max-width: 100%;
max-height: 100%;
display: block;
border-radius: 1rem 1rem 0 0;
}
.card-component__product-info {
font-family: "Montserrat";
color: var(--dark-grayish-blue);
width: 100%;
height: auto;
background-color: var(--white);
padding: 0 2.5rem;
border-radius: 0 0 1rem 1rem;
}
.card-component__product-info span {
display: block;
letter-spacing: 0.5rem;
font-size: 1.2rem;
margin-bottom: 1rem;
margin-top: 2rem;
}
.card-component__product-description {
margin-bottom: 2rem;
}
.card-component__product-description h1 {
font-family: "Fraunces";
font-weight: bold;
font-size: 3.4rem;
line-height: 3.5rem;
color:black;
margin-bottom: 1.5rem;
}
.card-component__product-description p {
line-height: 2.5rem;
}
.card-component__price {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.card-component__price h1 {
font-family: "Fraunces";
font-weight: bold;
font-size: 3.4rem;
color: var(--dark-cyan);
margin-right: 2rem;
}
.card-component__price p {
text-decoration: line-through;
}
.card-button {
width: 100%;
height: 4.5rem;
margin-bottom: 2.5rem;
font-family: "Montserrat";
font-weight: bold;
color: var(--white);
border: none;
background-color: var(--dark-cyan);
border-radius: 0.8rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.card-button img {
margin-right: 1rem;
}
.card-button:hover {
background-color: var(--very-dark-blue);
}
CSS:Desktop
.card-component {
flex-direction: row;
}
.card-component .card-component__image {
border-radius: 1rem 0 0 1rem;
}
.card-component__product-info{
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
border-radius: 0 1rem 1rem 0;
}
I've been working on this project and I am fully stuck on ensuringing both cards (the image and the project content) are on the same row when displayed on desktop. After a few days, I admit I need help.
Can anyone tell me where I've gone wrong and how I can solve this using flexbox correctly because I am going crosseyed trying to figure it out.
Below is a photo of what it's supposed to look like in desktop.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
justify-content: center;
height: 100vh;
}
h1 {
color: black;
font-family: 'Fraunces', serif;
font-size: 1.875em;
}
h3 {
font-size: 0.75em;
font-weight: 500;
letter-spacing: 7px;
text-transform: uppercase;
}
p {
font-size: 0.75em;
line-height: 1.7;
}
/* ------ ENTIRE CONTAINER --------- */
#card-container {
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
flex-direction: row;
width: 700px;
margin: 0 auto;
}
#card-container row {
display: flex;
flex-direction: row;
margin: 0;
}
#media screen and (max-width : 667px) {
#container {
border-radius: 10px 0 10px 0;
height: 39.7em;
width: 22.8em;
}
}
/* ------ LEFT CONTAINER w/ IMAGE --------- */
.image {
background-image: url(images/image-product-desktop.jpg);
background-repeat: no-repeat;
background-size: contain;
border-radius: 10px 0 0 10px;
height: 394px;
max-width: 50%;
margin-right: 0;
display: flex;
flex-direction: row;
}
#media screen and (max-width : 667px) {
.image {
background-image: url(images/image-product-mobile.jpg);
border-radius: 10px 10px 0 0;
height: 230px;
width: 50%;
margin: 0 auto;
}
}
/* ------RIGHT CONTAINER w/ CONTENT --------- */
.right-container {
background-color: white;
border-radius: 0 10px 10px 0;
height: 450px;
padding: 2em;
width: 50%;
}
#media screen and (max-width : 667px) {
.right-container {
border-bottom-left-radius: 10px;
border-top-right-radius: 0px;
padding: 30px 30px 5px;
width: 50%;
margin: 0 auto;
}
}
.right-container h1 {
margin: auto auto 7% auto;
}
.right-container h3 {
padding-bottom: 1em;
padding-top: 1.9em;
}
.right-container p {
padding-right: 2em;
padding-top: 1.1em;
}
/* ------ PRICES --------- */
.price-container h1 {
color: hsl(158, 36%, 37%);
display: inline-block;
margin-top: 20%;
}
.price-container p {
display: inline-block;
margin-left: 5em;
text-decoration: line-through;
}
/* ------- ADD TO CART --------- */
.cart-btn {
background-color: hsl(158, 36%, 37%);
background-position: 4em;
background-repeat: no-repeat;
border-radius: 10px;
border: transparent;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
padding: 4% 32%;
}
.cart-btn:hover {
background-color: black;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Product preview card component</title>
<!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap"
rel="stylesheet">
</head>
<body>
<section class="card-container">
<div class="row">
<div class="image">
<div class="img-desktop"></div>
<div class="img-mobile"></div>
</div>
</div>
<div class="row">
<div class="right-container">
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</p>
<div class="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<div class="cart-container">
<img src="./images/icon-cart.svg" alt="card-img">
<button class="cart-btn">Add to Cart</button>
</div>
</div>
</div>
</section>
</body>
</html>
To solve this I simply put the element with the background-image in a new div called .left-container. I removed the use of two .row's and put them in one row and set it to display: flex;. I then used Font Awesome for your shopping cart icon.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
justify-content: center;
height: 100vh;
}
h1 {
color: black;
font-family: 'Fraunces', serif;
font-size: 1.875em;
}
h3 {
font-size: 0.75em;
font-weight: 500;
letter-spacing: 7px;
text-transform: uppercase;
}
p {
font-size: 0.75em;
line-height: 1.7;
}
.row {
display: flex;
}
/* ------ ENTIRE CONTAINER --------- */
#card-container {
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
flex-direction: row;
width: 700px;
margin: 0 auto;
}
#card-container row {
display: flex;
flex-direction: row;
margin: 0;
}
/* ------ LEFT CONTAINER w/ IMAGE --------- */
.left-container {
width: 50%;
height: 450px;
}
.image {
background-image: url(https://i.picsum.photos/id/487/200/300.jpg?grayscale&hmac=j_GpFy8cDZyFmRD6sSG09M39jrZwpW3dCYWYnWlC1Vo);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
border-radius: 10px 0 0 10px;
margin-right: 0;
display: flex;
flex-direction: row;
}
/* ------RIGHT CONTAINER w/ CONTENT --------- */
.right-container {
background-color: white;
border-radius: 0 10px 10px 0;
height: 450px;
padding: 2em;
width: 50%;
display: flex;
flex-flow: column;
justify-content: space-around;
}
.right-container h3 {
padding-bottom: 1em;
padding-top: 1.9em;
}
.right-container p {
padding-right: 2em;
padding-top: 1.1em;
}
/* ------ PRICES --------- */
.price-container h1 {
color: hsl(158, 36%, 37%);
display: inline-block;
margin-top: 20%;
}
.price-container p {
display: inline-block;
margin-left: 5em;
text-decoration: line-through;
}
/* ------- ADD TO CART --------- */
.cart-btn {
background-color: hsl(158, 36%, 37%);
background-position: 4em;
background-repeat: no-repeat;
border-radius: 10px;
border: transparent;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
width: 100%;
padding: 1em;
}
.cart-btn:hover {
background-color: black;
cursor: pointer;
}
i {
color: white;
}
.card-container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Product preview card component</title>
<!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap" rel="stylesheet">
</head>
<body>
<section class="card-container">
<div class="row">
<div class="left-container">
<div class="image">
<div class="img-desktop"></div>
<div class="img-mobile"></div>
</div>
</div>
<div class="right-container">
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<div class="cart-container">
<button class="cart-btn"><i class="fa-solid fa-cart-shopping"></i>
Add to Cart</button>
</div>
</div>
</div>
</section>
</body>
</html>
I have made my self page that replicates the solution you want, I have done minimal styling to make you understand how flexbox properties in CSS work (NOTE: I have not made it responsive so try to have a look on desktop view). Refer to my solution and ask question(s) if you are facing any doubts.
* {
margin: 0;
padding: 0;
}
.card-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
font-family: "Montserrat", sans-serif;
font-size: 0.875em;
}
#random-image {
height: 100%;
width: 100%;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.intermediate-container {
display: flex;
width: 60%;
height: 50%;
border-radius: 8px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.55);
}
.left-container {
width: 50%;
}
.right-container {
width: 50%;
padding: 10px;
background-color: white;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
<!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="styles.css" />
<title>Your title</title>
</head>
<body>
<section class="card-container">
<div class="intermediate-container">
<div class="left-container">
<img
id="random-image"
src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
/>
</div>
<div class="right-container">
<div>
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>
A floral, solar and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
</p>
<div class="price-container">
<h1>$149.99</h1>
</div>
<div class="cart-container">
<button class="cart-btn">
<i class="fa-solid fa-cart-shopping"></i> Add to Cart
</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
#card-container row <- use proper selector (.row)
and from given information I can only predict that
I need some help to simply/correct my code.
I have an icon and I want its transparent background to go over the entire image it is hovering on. I think my approach is wrong with what I am doing now. Some suggestions?
My understanding of hover is still at the beginning and I am trying to build stuff in order to fully grasp it.
Here is the code:
body {
background-color: hsl(217, 54%, 11%);
}
.container {
width: 19rem;
height: 32rem;
margin: auto;
font-family: "Outfit", sans-serif;
background-color: hsl(216, 50%, 16%);
padding: 1rem;
margin-top: 8.5rem;
border-radius: 0.7rem;
box-shadow: 1px 1px 5px black;
}
/* I need help here*/
.equilibrium {
width: 19rem;
border-radius: 0.7rem;
cursor: pointer;
}
.image-hover:hover .view {
display: block;
background-color: hsl(178, 100%, 50%, 0.5);
}
.view {
position: absolute;
display: none;
top: 42%;
right: 47.5%;
}
.equilibrium .container h4:hover {
color: cyan;
}
.container h4 {
color: white;
}
.container p {
color: hsl(215, 51%, 70%);
font-size: 0.9rem;
}
.details {
display: flex;
justify-content: space-between;
padding-bottom: 1rem;
}
.ethereum {
color: cyan;
font-size: 0.8rem;
}
.clock {
color: hsl(215, 51%, 70%);
font-size: 0.8rem;
}
.ethereum img,
.clock img {
padding-right: 0.3rem;
position: relative;
top: 0.2rem;
}
.creator {
color: white;
}
.creator img {
height: 1.7rem;
border: 1px solid white;
border-radius: 50%;
}
.text {
position: relative;
left: 0.7rem;
bottom: 0.7rem;
}
.sub-text {
color: white;
}
.sub-text:hover {
color: cyan;
}
hr {
border: 1px solid rgb(88, 88, 88);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Outfit"
/>
<title>Frontend Mentor | NFT preview card component</title>
</head>
<body>
<div class="container">
<div class="image-hover">
<img src="./images/image-equilibrium.jpg" class="equilibrium" alt="" />
<img src="./images/icon-view.svg" alt="view image" class="view" />
</div>
<h4>Equilibrium #3429</h4>
<p>
Our Equilibrium collection promotes <br />
balance and calm.
</p>
<div class="details">
<span class="ethereum"
><img src="./images/icon-ethereum.svg" alt="" />0.041 ETH</span
>
<span class="clock"
><img src="./images/icon-clock.svg" alt="" />3 days left</span
>
</div>
<hr />
<p class="creator">
<img src="./images/image-avatar.png" alt="" /><span class="text"
>Creation of<span class="sub-text"> Jules Wyvern</span></span
>
</p>
</div>
</body>
</html>