I have the following code. Right now the overlay appears, but it's not on top of the image - it starts below the image. I want to make it that when I hover over the button, the info in the "wheel-display-overlay" class is visible and takes up the whole width and height of the button and is on top of the image.
button.wheel-display-button {
background-color: white;
background-size: cover;
border-color: black;
display: inline-block;
height: 400px;
padding: 0px;
width: 20%;
}
button.wheel-display-button:hover .wheel-display-base {
display: none;
}
button.wheel-display-button .wheel-display-overlay {
display: none;
}
button.wheel-display-button:hover .wheel-display-overlay {
background: black
color: white;
display: inline-block;
position: relative;
text-align: center;
width: 100%;
height: 100%;
}
<button class="wheel-display-button"
<img src="variant.image"/>
<span class="wheel-display-base">
<p>Brand</p>
</span>
<span class="wheel-display-overlay">
<p>Model</p>
<p>Size</p>
<span>
</button>
Hope it is what you are looking for:
button.wheel-display-button {
background-color: white;
background-size: cover;
border-color: black;
display: inline-block;
height: 400px;
padding: 0px;
width: 20%;
position:relative;
}
button.wheel-display-button:hover .wheel-display-base {
display: none;
}
button.wheel-display-button .wheel-display-overlay {
display: none;
}
button.wheel-display-button:hover .wheel-display-overlay {
background: black
color: white;
display: inline-block;
position: absolute;
text-align: center;
width: 100%;
height: 100%;
left:0;
top:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
<button class="wheel-display-button"
<img src="variant.image"/>
<span class="wheel-display-base">
<p>Brand</p>
</span>
<span class="wheel-display-overlay">
<p>Model</p>
<p>Size</p>
<span>
</button>
Related
So I'm trying to make a navigation bar (or header?) similar to what I've seen online from another website.
how i wanted it to be
I've successfully made the logo image centered. But I'm having trouble styling the buttons (like About, Blog, etc.), whether should I use floats or another type of style?
Here's my code to make the image centered:
.nav {
z-index: 99;
display: table;
height: 100px;
width: 100%;
background-color: #fdf4e4;
}
.nav .logo {
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#home_btn {
margin: 0;
width: 85px; height: 85px;
background-image: url(drone.png);
background-size: cover;
background-color: black;
border: transparent;
}
<div class="nav">
<div class="logo"><button id="home_btn"></button></div>
</div>
But once I insert the text, the image is no longer centered.
.nav {
z-index: 99;
display: table;
height: 100px;
width: 100%;
background-color: #fdf4e4;
}
.nav .logo {
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#home_btn {
margin: 0;
width: 85px; height: 85px;
background-size: cover;
background-color: black;
border: transparent;
}
.navbar {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.navbar .about, .services, .help, .partner {
font-family: 'Sifonn Pro';
background-color: transparent;
border: transparent;
cursor: pointer;
font-size: 20px;
padding: 0 16px;
color: #061925;
text-align: center;
}
<div class="nav">
<div class="logo"><button id="home_btn"></button></div>
<div class="navbar">
<button class="about" type="button" onclick="window.location.href='.html'">About Us</button>
<button class="services" type="button" onclick="window.location.href='.html'">Services</button>
<button class="help" type="button" onclick="window.location.href='.html'">Help Centre</button>
<button class="partner" type="button" onclick="window.location.href='.html'">Be Our Partner</button>
</div>
</div>
I want my 'About Us' and 'Services' to be on the left side of the navbar, while the 'Help Centre' and 'Be Our Partner' to be on the right side. Does anyone know how to do it? With floats or anything is fine, as long as I could get it similar to the sample I got from another website online.
create a 3 column grid with grid-template-columns: auto min-content auto; that way, the logo will be centered and only use as much space as needed. the left and right sided columns will take the remaining space equally.
nav {
display: grid;
grid-template-columns: auto min-content auto;
white-space: nowrap;
}
nav div:nth-child(1) {
text-align: left;
}
nav div:nth-child(1) a {
margin-right: 15px;
}
nav div:nth-child(3) {
text-align: right;
}
nav div:nth-child(3) a {
margin-left: 15px;
}
.logo {
width: 1em;
height: 1em;
background-color: black;
}
<nav>
<div>
About Wolfin
Blog
Contact
</div>
<div>
<div class="logo"></div>
</div>
<div>
Collection
Stories
Shops
</div>
</nav>
I'm trying to altar two buttons (Easy, Hard) on a web app I'm building. I am trying to alter them to remove their borders, and when a button is selected, I want to background to flow up into the header as a visual indication for being selected.
Note: I am linking Bootstrap 4 at the moment.
Current Visual:
Desired Visual:
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
}
.selected {
background:#66b0c4;
border: none;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
I hope this can help you.
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
padding-top: 5px;
}
.selected {
background:#66b0c4;
border: 0;
padding: 5px;
position: relative;
}
.selected::before {
position: absolute;
content: '';
top: -10px;
left: 0;
width: 100%;
background-color: #66b0c4;
height: 10px;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
Solved by adjusting the height of background on the selected class. Also solved the selection issue with
*:focus {
outline: 0 !important;
}
CSS Now:
.selected {
background:#66b0c4;
border: none;
height: 30px;
}
*:focus {
outline: 0 !important;
}
I'm new to CSS and I'm trying to place some dots at position 0,0 of it's parent div, but when I do so according to the below code, the dots disappear.
* CSS Code: *
.timeslot{
background-color: green;
border-top: solid gray;
}
.timeslot.selected{
border: #cc0000;
}
.timeslot.selected .dot{
background-color: #cc0000;
}
.timeslot .dot{
background-color: gray;
}
.dot {
position: absolute;
height: 25px;
width: 25px;
background-color: firebrick;
border-radius: 50%;
display: inline-block;
}
.square {
height: 25px;
width: 40px;
background-color: #555;
}
.dot .span {
padding-top: 8px;
}
.time-line-box {
height: 100px;
padding: 50px 0;
width: 100%;
/* background-color: burlywood;*/
}
.swiper-container {
width: 95%;
margin: auto;
overflow-y: auto;
}
.swiper-wrapper{
display: inline-flex;
flex-direction: row;
overflow-y:auto;
justify-content: center;
border-top-width: 20px;
}
.swiper-container::-webkit-scrollbar-track{
background:#a8a8a8b6;
}
.swiper-container::-webkit-scrollbar{
height: 2px;
}
.swiper-container::-webkit-scrollbar-thumb{
background: #4F4F4F !important;
}
.swiper-slide {
text-align: center;
font-size: 12px;
width: 50px;
height: 100%;
/*position: relative;*/
}
* HTML Code: *
<section class="time-line-box">
<div class="swiper-container text-center">
<div class="swiper-wrapper">
<div *ngFor="let time of dropDownArray" class="timeslot swiper-slide">
<div class="dot" [style.background-color]="getBackgroundColor(time)"><span>{{time.label}}</span></div>
</div>
</div>
</div>
</section>
I'm trying to place each dot at the absolute position of it's parent div timeslot . I might be missing something but I really tried everything I know. Hope to find some help.
Add position relative to your parent
.timeslot{
// ...
position: relative;
}
I'm new to CSS etc.
I'm trying to align 2 buttons next to each other, in center of the background image, so it stays in position even when the window is being resized.
Image for illustration:
Code:
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
<div class="container">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
So, maybe you could try:
.container{
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
Or have you seen anything about flexbox? Since you want it to be responsive, I think it might be the best altenative.
.container {
display: flex;
align-items: center;
justify-content: space-around;
}
Why you creating two classes with same properties? first you can remove properties from classes: button1 and button2 and then add these properties to button class like this:
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
/* properties from class button1 or button2 */
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
And in button1 and button2 class add codes below to center these:
.button1 {
transform: translate(-50%, -50%);
position: absolute;
left: 40%;
top: 50%;
}
.button2 {
transform: translate(-50%, -50%);
position: absolute;
left: 60%;
top: 50%;
}
Don't change HTML code, classes are same.
Add this CSS code and change the top and left values as you need;
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
Edit HTML Code look like this;
<div class="btncenter">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
Below Final code sample you can view;
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
<div class="container">
<div class="btncenter">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
</div>
I prefer to use #media queries per-width of the screen.
With position : absolute; and just play the top or left value as you need :D
There are multiple ways to do it. The code below will keep the buttons separated from each other until there is no space left. This should give you a start.
You can also use position: fixed if you need a more fixed solution. But I will recommend playing with flex property. It should solve most of the use-cases.
.btn-container {
display: flex;
align-items: center;
justify-content: space-around;
}
button {
background: pink;
color: #fff;
padding: 20px 40px;
}
<div class="btn-container"> <button class="first">Button 1</button><button class="second">Button 1</button></div>
I'm trying to center a text inside a div, this div contains an image + another div which contains the text that needs to be centered.
See image the following image:
The problem I'm facing is that the image which is also in the div doesn't allow me to outline the text in the center.
I tried to apply padding and margins(even negatives ones) however with no results
So right now this is the code I have in my HTML & CSS files:
.destinations {
padding: 5px 15px;
}
.destinations img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.flex-item {
width: 290px;
height: auto;
border-radius: 10px;
margin: auto;
}
.flex-item-title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="flex-item">
<img src="assets/img/wassenaar.jpg">
<div class="flex-item-title">Wassenaar</div>
</div>
</div>
I hope you can help me out
Here is one approach to vertically and horizontally center the text over the image:
.destinations {
padding: 5px 15px;
}
.destination {
width: 290px;
height: 290px;
display: flex;
border-radius: 10px;
margin: auto;
background-image: url("https://placekitten.com/500/500");
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="destination">
<div class="title">Wassenaar</div>
</div>
</div>
You can get your porblem solve using following css .
.flex-item{
width:300px;
height:200px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}
.flex-item-title{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 300px;
height: 200px;
text-align: center;
color: white;
display: inline-table;
vertical-align:middle;
line-height:100%;
}
Try changing your css to this css , it will work .