I have this HTML:
.orderData_button {
background-color: #FF5733;
border: none;
color: white;
padding: 5px 60px;
text-align: center;
display: inline-block;
font-size: 16px;
transition: width 1s ease-in-out
}
.slideDown_orderData {
display: none;
position: relative;
z-index: 3;
transition: width 1s ease-in-out
}
.orderData_button:hover .slideDown_orderData {
display: block;
width: 100%;
}
.orderData_button:hover {
width: 50%;
}
#orderData_2 {
font-size: 20px;
text-align: center;
}
<div class="orderData_button">
<p>Your Orders</p>
<p></p>
<div class="slideDown_orderData">
<p id="orderData_2"></p>
</div>
</div>
My orderData_button and slideDown_orderData will not transition width, but will change instantly. Why is this? (Yes I have look all over google, with no success)
-CSS noob
Related
I have searched SO for this answer and could not find something specific enough that works. I saw there were a lot of similar questions, but none that lead me to a working solution. I am sorry if this is a duplicate
I am trying to replicate the feature elements from the MySpace homepage (https://myspace.com/). I am trying to get one main feature image on the left and two smaller elements (img and video) on the right. The images should go flush against each other with each column being the same height. The grid should be responsive to the changes in size of the web broser so it stays centered, proportionate, and flush.
I am using the Bootstrap 5 grid system. I have a container with a main row. That row contains two columns. The left column is for the main image. The right column holds two more rows. The top row has an image, the bottom row has an iframe.
I have used object-fit: cover, overflow:hidden, max-width: some value, max-height: auto (and vice-versa), and all combinations of rows/cols.
I've spent hours Googling and looking up examples and YouTube videos. Everything is showing basic concepts but nothing with examples in ReactJS or that are at my lower skill level.
This feels like it should be super easy and it has been the hardest thing I've had. I have even been staring at the HTML in the devtools of the MySpace page to see if I can reverse-engineer it.
import React from "react";
import Feature from "../page/Feature";
import { IMAGES_BANDS, VIDEOS_HIGHLIGHTS } from "../../images/images";
export default function Bands() {
return (
<>
<div className="container">
<div className="row">
<Feature
IMAGES_FEATURE={IMAGES_BANDS}
IMAGE_HIGHLIGHT={IMAGES_BANDS[0].image}
VIDEO_HIGHLIGHT={VIDEOS_HIGHLIGHTS[0].video}
/>
</div>
</div>
</>
);
}
import React from "react";
import Slider from "../page/Slider";
export default function Feature(props) {
const { IMAGES_FEATURE, IMAGE_HIGHLIGHT, VIDEO_HIGHLIGHT } = props;
return (
<>
<div className="container image-fit-cover no-margin-padding">
<div className="row row-cols-2 justify-content-center row-size-feature">
<div className="col-8">
<Slider images={IMAGES_FEATURE} />
</div>
<div className="col-4">
<div className="row">
<img src={IMAGE_HIGHLIGHT} alt="band-highlight" />
</div>
<div className="row">
<iframe
src={VIDEO_HIGHLIGHT}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
/>
</div>
</div>
</div>
</div>
</>
);
}
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
#media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
#keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.colors-theme {
background-color: black !important;
color: white !important;
}
.btn-theme {
background-color: white;
color: #000000;
display: inline-block;
font-weight: 400;
text-align: center
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
text-decoration: none
}
.btn-theme:focus,
.btn-theme:hover {
text-decoration: none;
background-color: #944dff;
color: #e0ccff;
}
.btn-theme-dark {
color: white;
background-color: black;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
.btn-theme-dark:focus,
.btn-theme-dark:hover {
text-decoration: none;
color: black;
background-color: #e0f2f1;
}
.btn-link-theme {
font-weight: 400;
color: #f0e6ff;
background-color: transparent;
border-color: transparent;
text-decoration: none;
padding: 0px;
}
.btn-link-theme:hover {
color: gray;
text-decoration: underline;
background-color: transparent;
border-color: transparent
}
.navbar-search-form {
justify-content: flex-end;
}
.float-right{
float: right;
}
/*slider css*/
.slider {
position: relative;
margin-top: 10px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
. right-arrow {
position: absolute;
top: 50%;
right: 5px;
font-size: 1rem;
color: black;
z-index: 10;
cursor: pointer;
user-select: none;
}
.left-arrow {
position: absolute;
top: 50%;
left: 5px;
font-size: 1rem;
color: black;
z-index: 10;
cursor: pointer;
user-select: none;
}
.slide {
opacity: 0;
transition-duration: 2s ease;
}
.slide.active {
opacity: 1;
transition-duration: 2s;
transform: scale(1.00);
}
/**/
.text-overlay-parent {
position: relative;
width: 100%;
height: 100%;
}
.text-overlay-child{
position: absolute;
top: 15%;
left: 10%;
}
.font-styles-heading{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.row-size-feature{
height: 360px;
}
.image-fit-cover img {
height:auto;
max-width:700px;
overflow: hidden;
object-fit: cover;
}
.image-fit-cover iframe {
height: auto;
max-width: 700px;
overflow: hidden;
object-fit: cover;
}
.no-margin-padding * {
margin: 0px;
padding: 0px;
}
img of current page
I have a nav menu that slides into view from the right side of the screen once the hamburger icon is clicked. It works correctly in Chrome and Firefox - basically when triggered it takes up 50vw and fills the screen vertically. However in Safari it seems as if the z-index is not behaving correctly because the menu appears to be buried underneath the other elements of the page and ultimately not visible at all.
I've tried adjusting the z-index of a variety of elements to see if that was the simple fix and it has proven to be something more complicated. I have read a few forums that suggested including "-webkit-transform: translate3d(0, 0, 0);" but unfortunately that doesnt seem to work either. If you inspect the sidebarMenu element in Safari you can see that it is in the correct position, it is just not rendering correctly.
Below is a link to a codepen - I am missing some styles on this so the positioning isnt quite right but it effectively shows the general functionality that I am looking for. When opening this link in Safari you can see that the sidebarMenu does not appear to be rendering at all.
https://codepen.io/rmann20/pen/EzbeaV
sample code:
<div class="header">
<hr class="nav-rule">
<div class="nav-container">
<div class="nav-logo-container">
<img class="nav-logo" src="images/nav_logo.png">
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Rooms & Suites</li>
<li>Packages</li>
<li>Eat & Drink</li>
<li>Meetings & Events</li>
<li>Weddings</li>
<li>Experiences</li>
<li>Neighborhood</li>
</ul>
<ul class="sidebarMenuInnerSecondary">
<li>ABOUT</li>
<li>HISTORY</li>
<li>GALLERY</li>
<li>PRESS</li>
<li>CONTACT</li>
<li>CAREERS</li>
</ul>
</div>
</div>
<img class="nav-tagline" src="images/nav_tagline.png">
<a class="nav-reservation-button" href="" target="_blank">RESERVE NOW</a>
</div>
<hr class="nav-rule">
</div>
.header {
display: flex!important;
flex-wrap: wrap;
margin: 0;
padding: 10px 0 10px 0;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #f5f4f0;
position: fixed;
height: 110px!important;
overflow: hidden;
z-index: 10;
justify-content: space-between!important;
}
.nav-container {
display: flex;
height: 79px;
width: 100%;
align-items: center;
justify-content: space-between;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
min-height: 100%;
position: fixed;
right: 0;
width: 50vw;
margin-top: 42px;
transform: translateX(50vw);
transition: transform 250ms ease-in-out;
background-color: #f5f4f0;
overflow: scroll;
padding: 60px 60px 60px 60px;
z-index: 10000!important;
}
.sidebarMenuInner{
margin:8px;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
list-style: none;
}
.sidebarMenuInner li a{
color: #3d3936;
font-family: 'QuincyCF-ExtraBold', Helvetica, Arial, Sans-Serif;
font-weight: normal;
font-style: normal;
cursor: pointer;
text-decoration: none;
font-size: 3.2em;
}
.sidebarMenuInnerSecondary {
margin-top: 60px;
list-style: none;
}
.sidebarMenuInnerSecondary li {
margin-top: 14px;
margin-bottom: 14px;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 48px;
right: 40px;
height: 28px;
width: 28px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #3d3936;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
.nav-logo-container {
width: 260px;
margin-left: 40px;
}
I dont get any errors and everything else seems to be working correctly, can't figure out why it's not showing at this point. Any help would be greatly appreciated!
How to show the scrollable menu when passing the pointer over the div of the text 1x the scrollable menu is displayed.
What I want to do is something similar to the following image:
My code structure:
.spdText {
width: 3em;
height: 1.8em;
line-height: 1.8em;
position: relative;
font-size: 1em;
font-weight: 900;
text-shadow: none;
border-radius: 10%;
color: #29303b;
background-color: hsla(0,0%,100%,.9);
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.speed:hover,
.btnSpd:hover .speed {
display: inline-table;
list-style: none;
max-height: 300px;
transition: max-height 1s;
top: -170px;
}
<div class="spdText">1x
<ul class="speed">
<li>x3</li>
<li>x1</li>
</ul>
</div>
Something like this?
Edit:
First you leave a space above 'spdText'. You position 'speed' over 'spdText' giving it a negative top value.
.spdText {
width: 3em;
height: 1.8em;
line-height: 1.8em;
position: relative;
font-size: 1em;
font-weight: 900;
text-shadow: none;
border-radius: 10%;
color: #29303b;
background-color: hsla(0,0%,100%,.9);
margin-top:5rem; /* You leave a space above */
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.spdText:hover .speed {
display: block;
list-style: none;
max-height: 300px;
transition: max-height 1s;
left:-25px;
background-color: black;
opacity: 0.5;
color: white;
top: -4.4rem;
}
<div class="spdText">1x
<ul class="speed">
<li>x3</li>
<li>x1</li>
</ul>
</div>
I'm trying to create a CSS transistion where When I click on a button it fades out and disappears to which another element will take it's place.
I've nearly completed it, however. When applying the class .hide to the button it "jumps" (the height property is not to be touched until the opacity is done). The max-height does not seem to respect the css transition property I've set in the css.
Codepen: https://codepen.io/basickarl/pen/zwzNXM?editors=1111
HTML:
<div class="app-profession">
<button id="one" class="add-profession" onclick="func()">
<img/>
Click me!
</button>
<div id="two" key="pickArea" class="pick-area">
Here! 2
</div>
</div>
SCSS:
button.add-profession {
width: 500px;
padding-top: 16px;
padding-bottom: 16px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Verdana';
font-size: 18px;
font-weight: 300;
text-decoration: none;
color: black;
outline-style: none;
border: none;
border-radius: em(0);
opacity: 1;
background: lightblue;
img {
margin-right: em(5);
content: url('static/images/add_cross_white.png');
height: em(30);
}
transition: opacity 2s ease-in-out 0s, max-height 0s linear 2s, padding 0s ease-in-out 2s;
&.hide {
opacity: 0;
max-height: 0; // <--- here
padding: 0;
overflow: hidden;
}
&:hover {
background-color: red;
cursor: pointer;
}
}
.pick-area {
display: flex;
justify-content: center;
align-items: center;
background-color: green;
opacity: 0;
max-height: 0em;
overflow: hidden;
width: 500px;
padding: 16px;
transition: all 2s linear 2s;
&.show {
max-height: 500px;
opacity: 1;
}
}
JS:
function func() {
document.getElementById('one').classList.add('hide');
document.getElementById('two').classList.add('show');
}
If you add a max-height to the button.add-profession class it will stop jumping
button.add-profession {
width: 500px;
padding-top: 16px;
padding-bottom: 16px;
max-height: 60px; /* added property */
....
Updated codepen
I have made following demo on Codepen. Problem is when the height of viewport is decreased scroll appear which i want but logo is hidden under icon-list which is the unwanted behavior. Everything works properly if viewport height is enough.
<input type="checkbox" id="menu-expander" name="ert">
<div class="main-menu-container">
<div class="logo-area">
<div class="logo"><img src="http://extensiondl.maxthon.com/skinpack/11018970/1375652328/icons/icon_32.png"></div>
</div>
<ul class="sidebar-icon-list">
<li class="sidebar-icon">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Week</span>
</li>
<li class="sidebar-icon menu-active">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Projects</span>
</li>
<li class="sidebar-icon" title="Life">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Life</span>
</li>
<li class="sidebar-icon">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Analysis</span>
</li>
<li class="sidebar-icon">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Projects</span>
</li>
</ul>
<div class="sidebar-wt">
<label for="menu-expander"><img src="https://cdn3.iconfinder.com/data/icons/awesome-lineca-vol-1/17/angle-right-128.png"></label>
</div>
<div class="user-area">
<div class="user-pic"></div>
</div>
CSS
input[name="ert"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
}
/* Main Menu Contaier */
.main-menu-container {
width: 6em;
position: fixed;
top: 0;
left: 0;
height: 100vh;
background-color: hsl(207,6%,12%);
color: #fff;
display: flex;
flex-direction: column;
z-index: 100;
border-right: 1px solid black;
transition: width 0.2s ease-in;
overflow-y: auto;
overflow-x: hidden;
}
input[name="ert"]:checked + .main-menu-container {
width: 12em;
transition: width .3s linear;
}
/* Logo Area */
.logo-area {
height: 6em;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 4em;
width: 4em;
}
.logo img {
height: 4em;
width: 4em;
}
/* Icon List */
.sidebar-icon-list {
display: flex column;
list-style: none;
width: 100%;
padding: 0;
margin: 0;
flex-grow: 1;
}
.sidebar-icon {
color: #eaeaea;
width: 100%;
border-left: 3px solid hsl(207,6%,12%);
height: 3em;
margin: 1em 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
transition: all 0.3s linear;
}
.sidebar-icon:hover {
color: #fff;
border-left: 3px solid #EEFF22;
}
.sidebar-icon img {
color: #fff;
width: 2em;
height: 2em;
}
.sidebar-icon span {
font-size: 0.75em;
opacity: 0;
position: absolute;
transition: all 0.1s linear;
}
input[name="ert"]:checked + .main-menu-container .sidebar-icon-list .sidebar-icon {
flex-direction: row;
justify-content: flex-start;
padding-left: 1em;
transition: all 0.3s linear;
}
input[name="ert"]:checked + .main-menu-container .sidebar-icon-list .sidebar-icon span {
font-size: 0.75em;
opacity: 1;
position: relative;
transition: all 0.3s linear;
margin-left: 1em;
}
.menu-active {
border-left: 3px solid #EEFF22;
color: #EEFF22;
}
/* Sidebar Expander */
.sidebar-wt {
display: flex;
justify-content: flex-end;
}
.sidebar-wt label img {
height: 1.5em;
width: 1.5em;
cursor: pointer;
}
.main-menu-container .sidebar-wt label img {
transition: all 0.3s linear;
}
input[name="ert"]:checked + .main-menu-container .sidebar-wt label img {
transform: rotateZ(180deg);
transition: all 0.3s linear;
}
/* USer Area at Bottom */
.user-area {
height: 4em;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.user-pic {
width: 100%;
height: 5em;
border-bottom: 2px solid #2ca58d;
background-image: url(http://soccer1x2.net/wp-content/uploads/2012/03/leo-messi1.png);
background-size: cover;
}
.main-menu-container .sidebar-wt label img {
transition: all 0.3s linear;
}
input[name="ert"]:checked + .main-menu-container .sidebar-wt label img {
transform: rotateZ(180deg);
transition: all 0.3s linear;
}
It looks like the height of .logo-container is changing, when you decrease the window's height.
If you min-height: 6em; for .logo-area the height will not decrease.