I'm doing a small assignment and therefore not allowed to use javascript. Only html and css. I made a simple gallery with products and when I hover over them I'd like the small paragraph to become visible. Is there a way to 'call' the paragraph from the .product-container? I tried adding a + p but that doesn't seem to work. I also don't want to make a specific class for every div so ideally only the corresponding products paragraph is visible when hovering and not all of them. Hope you understand what I mean, I don't know the exact phrases to use since I'm very new.
#navbarDog {
background-color: #F5EFE6;
}
#logo {
height: 100px;
}
body{
font-family: "Montserrat";
font-weight: bold;
size: 3rem;
line-height: 1, 5;
}
.nav-link {
font-size: 20px;
transition: font-size 0.4s;
}
.nav-link:hover {
font-size: 25px;
}
.header-products {
display: flex;
align-items: center;
justify-content: center;
background-color: #E8DFCA;
padding: 50px;
}
main {
background-color: #AEBDCA;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.gallery img {
background-color: transparent;
width: 100%;
height: 350px;
padding: 10px;
object-fit: contain;
position: relative;
}
.product-container p{
visibility: hidden;
}
/* .gallery img:hover {
z-index: 9;
transform: scale(1.3);
transition: transform ease 0.5s;
} */
.product-container:hover {
z-index: 9;
transform: scale(1.3);
transition: transform ease 0.5s;
visibility: visible;
}
#media only screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
#footer {
background-color: #7895B2;
padding: 4%;
text-align: center;
}
.footer-icon {
color: #fe0707;
margin: 20px 10px;
text-decoration: none;
}
/* Adds color to hovering state (element.class.action in this order) */
a.footer-icon:hover {
color: #41678e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/b88143462d.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg" id="navbarDog">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="../img/logo.png" alt="" id="logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav w-100 mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<form class="d-flex ms-auto">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<header class="header-products">
<h1>Products</h1>
</header>
<main>
<div class="gallery">
<div class="product-container">
<img src="../img/tshirt-beighe.jpg" alt="">
<p>A stylish t-shirt made of 100% cotton. 450SEK</p>
</div>
<img src="../img/tshirt-blue.jpg" alt="">
<img src="../img/tshirt-gray.jpg" alt="">
<img src="../img/tshirt-white.jpg" alt="">
<img src="../img/tshirt-yellow.jpg" alt="">
</div>
</main>
<footer id="footer">
<p>© Copyright OnlyDogs</p>
</footer>
</body>
You could add the hover on the parent element:
.product-container p {
display: none;
}
.product-container:hover p {
display: block;
}
<div class="product-container">
<img src="https://via.placeholder.com/150" alt="">
<p>A stylish t-shirt made of 100% cotton. 450SEK</p>
</div>
Try this. Using general sibling selector. Doesn't matter what order.
img:hover ~ .product-container p {
visibility: visible
}
If that fails:
Wrap your image in a link tag and then do this.
a:hover img ~ .product-container p {
visibility: visible
}
Brand name not aligning to left in Bootstrap 5:
.navbar-nav>li {
padding-bottom: 2px;
font-size: 25px;
display: block;
}
nav {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
width: 100%;
}
.container {
text-align: center;
padding-top: 35px;
}
nav img {
padding-left: 15px;
opacity: 0.75;
}
#media screen and (max-width:379px) {
nav img {
content: center;
}
}
#media screen and (min-width:1140px) {
.navbar-nav {
padding-right: 26px;
}
}
nav .h3-brand {
color: black;
font-size: 30px;
opacity: 0.75;
box-align: left;
align-items: left !important;
align-items: start;
}
#media screen and (max-width:420px) {
.navbarbutton {
margin: auto;
}
}
#media screen and (min-width:420px),
screen and (max-width:1140px) {}
#media screen and (min-width:421) {
.navbarbutton {
margin: 0px;
margin-right: 30px;
}
}
.navbar-toggler {
opacity: 0.75;
border: none;
}
.navbar-toggler:hover {
opacity: 2;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Company</title>
<link rel="stylesheet" href="Index.css">
</head>
<body>
<nav class="navbar sticky-top navbar-expand-xl navbar-light bg-light ">
<a href="#" class="navbar-brand">
<img class="rounded" src="assets/company-name.png" alt="Company Logo" />
</a>
<h3 class="h3-brand navbar-brand">Company</h3>
<button class="navbar-toggler style: margin-right:30px; navbarbutton" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggleMobileMenu">
<ul class="row flex-row flex-wrap navbar-nav ms-auto text-center">
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Über uns</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">FAQ</a>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Preise</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Impressum</a></li>
</ul>
</div>
</nav>
<div class="container">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I tried the following rules, but none worked:
text-align: left;
align-content: left;
align-items: left;
float: left;
Change the Compagny tag to span, put a "h3" class on it to keep font-size and put this span IN the link of your brand. It is not in left because it is not in the link tag.
And no need a navbar-brand class on span Company.
<a href="#" class="navbar-brand">
<img class="rounded" src="assets/company-name.png" alt="Company Logo" />
<span class="h3">Company</span>
</a>
I have a problem with hyperlink code.
I used a to make a hyperlink but it's connecting with the css of the navbar and the button is now the same as the navbar buttons.
The ones circled in red are the hyperlinks i want to change but they are connecting to the navbar css and now are the same.
I tried giving it a class but it wasn't working.
a {
margin: 0;
border: 1vw;
padding: 0.5vw;
text-decoration: none;
color: black;
font-family: Kanit;
outline: solid;
outline-color: #00b7ff;
outline-width: 1px;
border-radius: 4px;
transition: background-color 0.3s ease-out;
}
a:hover {
background-color: #00b7ff;
}
li {
text-align: center;
align-content: center;
margin: 0.75vw;
font-size: 1.5vh;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav {
position: relative;
top: 10px;
display: flex;
height: min-content;
width: max-content;
background-color: transparent;
}
body {
margin: 0;
}
#media only screen and (max-width: 500px) {
ul {
flex-direction: column;
}
li {
margin: 0;
}
a {
display: block;
}
button {
display: block;
padding: 1vw;
font-size: 1.5vh;
border: none;
outline: none;
cursor: pointer;
align-self: flex-start;
}
}
button {
display: none;
}
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title> QuadroStudios </title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='./css/home.css'>
<!-- <script src='main.js'></script> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"> QuadroStudios </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="update.html"> Updates </a>
</li>
<li class="nav-item">
<a class="nav-link" href="leaks.html"> Leaks </a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="about.html"> About </a>
</li>
</ul>
</div>
</div>
</nav>
<style>
body {
background-color: #212529;
overflow-x: hidden;
}
.about {
position: relative;
top: 25px;
left: 10px;
color: white;
}
.title {
color: white;
font-size: 25px;
font-family: Inconsolata;
}
.storehauled {
position: relative;
top: 100px;
left: 30px;
color: white;
;
font-size: 20px;
font-family: Inconsolata;
}
</style>
<div class="about">
<h1 class="title"> Here you can find info about our games and what QuadroStudios is about! </h1>
</div>
<div class="storehauled">
<p> Storehauled <br> On Roblox: <a class="robloxgame" href="https://www.roblox.com/games/6258825725"> Roblox Game </a> <br> Released: 1/18/2021 <br>
<br> Current status: Remaking [in Beta] <br>
<br> Progress: <br> UI - Completed <br> Map - Mostly completed [70%] <br> Users: Brony#0445 Babushka_OP#6118 <br> Trello board: <a class="trello" href="https://trello.com/b/WzuH9IK3"> Trello of the Game</a> <br> Early access release: Late Q4 2021
- Beta is the last part of closed development. We'll let you know when you can access the game freely. <br>
<br> Teasers of the game: <br>
<br> The park is the most chilling place in here... <br>
<br>
<img src="teaser1.png">
</p>
</div>
</body>
here we go :
demo
html :
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>QuadroStudios</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="about.css" />
<!-- <script src='main.js'></script> -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style>
body {
background-color: #212529;
overflow-x: hidden;
}
.about {
position: relative;
top: 25px;
left: 10px;
color: white;
}
.title {
color: white;
font-size: 25px;
font-family: Inconsolata;
}
.storehauled {
position: relative;
top: 100px;
left: 30px;
color: white;
font-size: 20px;
font-family: Inconsolata;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"> QuadroStudios </a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="update.html"> Updates </a>
</li>
<li class="nav-item">
<a class="nav-link" href="leaks.html"> Leaks </a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="about.html">
About
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="about">
<h1 class="title">
Here you can find info about our games and what QuadroStudios is about!
</h1>
</div>
<div class="storehauled">
<p>
Storehauled <br />
On Roblox:
<a class="robloxgame" href="https://www.roblox.com/games/6258825725">
Roblox Game
</a>
<br />
Released: 1/18/2021 <br />
<br />
Current status: Remaking [in Beta] <br />
<br />
Progress: <br />
UI - Completed <br />
Map - Mostly completed [70%] <br />
Users: Brony#0445 Babushka_OP#6118 <br />
Trello board:
<a class="trello" href="https://trello.com/b/WzuH9IK3">
Trello of the Game</a
>
<br />
Early access release: Late Q4 2021 - Beta is the last part of closed
development. We'll let you know when you can access the game freely.
<br />
<br />
Teasers of the game: <br />
<br />
The park is the most chilling place in here... <br />
<br />
<img src="teaser1.png" />
</p>
</div>
</body>
css
.storehauled a {
position: relative;
text-decoration: none;
color: white;
}
.storehauled a:hover {
color: #00b7ff;
}
li {
text-align: center;
align-content: center;
margin: 0.75vw;
font-size: 1.5vh;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav {
position: relative;
top: 10px;
display: flex;
height: min-content;
width: max-content;
background-color: transparent;
}
#media only screen and (max-width: 500px) {
ul {
flex-direction: column;
}
li {
margin: 0;
}
a {
display: block;
}
button {
display: block;
padding: 1vw;
font-size: 1.5vh;
border: none;
outline: none;
cursor: pointer;
align-self: flex-start;
}
}
button {
display: none;
}
I am trying to design a simple website, and I have made a div's with a frosted glass effect, now I can position it left and right yet I can't seem to move it up!? the div in question has the name of product panel.
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>
Bearing in mind i just started out with web design some help and input is greatly appreciated.
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<style>
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
/*
Start of Code - Laxmikant Killekar
*/
body{
overflow-x: hidden;
}
/*
End of Code - Laxmikant Killekar
*/
</style>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<!-- Start of Code - Laxmikant Killekar -->
<div class="fluid-container">
<div class="row">
<div class="col-md-6">
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</div>
<div class="col-md-4 pull-right">
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</div>
</div>
</div>
<!--End of Code - Laxmikant Killekar-->
</body>
</html>
here
is the codepen, tell me if it solved your problem
put your
<div class="frosted-glass" id="product-panel">
before<div class="frosted-glass" id="contact-details">
Add top:(value)px to this
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
and you can change position to it
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>
When you use more than one items in a line, it should satisfy the width proportion
So, give width percentage '%' instead of pixel 'px',
here you can use float:left to include more than one item in a line.
Try to use width in percentage, it is the way most developers use
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:70%;
height: 400px;
text-align:left;
float:left;
}
#contact-details{
width:30%;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
float:left;
}
#details{
text-align: center;
}
enter code here
`<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</body>
</html>
I am trying to add text using a <p> tag inside of 4 black boxes using tags that are semi-transparent. I want the text inside of the container to NOT be transparent at all.
I know from what I've read that this an annoying set-back with CSS. I have seen options to use rgba() colors for the background, or using a .png image. I have tried the rgba() method on the parent container and that didn't work.
I don't really want to have to use an image due to it adding to load time due to the image file size. Everything I have tried has not worked. Can somebody give me some advice on how to handle this? Below is my code.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.opaque-box {
position: absolute;
top: 670px;
left: 15px;
background: #000000;
opacity: 0.4;
text-align: center;
width: 25%;
height: 30%;
border-top: solid 2px #ffffff;
border-bottom: solid 2px #ffffff;
}
p.box-content {
padding-top: 50px;
color: white;
font-size: 20px;
font-style: italic;
font-weight: bold;
position: relative;
}
.nav-item>a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position: absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/1/d/0B0DSNKIQ7ncnRDNNQUgwWk1tVXc=w1366-h653-iv1">
</div>
</nav>
<div class="opaque-box">
<div>
<p class="box-content">NEW <br>INVENTORY</p>
</div>
</div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here is what I found worked for me. I had to use top, and left properties to direct the text into the Below is the code that is a suitable solution. I'm sure there is a much cleaner way to do this but I'm not aware of it at this point.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.opaque-box {
z-index: 1;
position: absolute;
top: 670px;
left: 15px;
background: #000000;
opacity: 0.4;
width: 325px;
height: 197px;
border-top: solid 2px #ffffff;
border-bottom: solid 2px #ffffff;
}
.box-content {
text-align: center;
z-index: 2;
padding-top: 50px;
color: #ffffff;
font-size: 20px;
font-style: italic;
font-weight: bold;
position: relative;
top: -380px;
left: -500px;;
}
.nav-item > a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position:absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/1/d/0B0DSNKIQ7ncnRDNNQUgwWk1tVXc=w1366-h653-iv1">
</div>
</nav>
<div class="opaque-box"></div>
<p class="box-content">NEW <br>INVENTORY</p>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>