On mobile, the logo is fixed and obscures the top of the body text of the page. I added spacers to most pages to compensate for this, but I was unable to add a spacer to the Classifieds page which uses a blog format. Can anyone help me figure out how to add a spacer to the header so that it doesn't overlap the body?
Here is what I think are the relevant parts of the main.less file that causes the problem:
/* Header */
.wsite-header-section {
position: relative;
background: url(images/default-bg.jpg) no-repeat;
background-size: cover;
}
.wsite-header-section:before,
.splash-page .header-wrap:before {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 100%;
min-height: 100%;
height: inherit;
background: rgba(0, 0, 0, 0.2);
content: '';
}
.wsite-section-bg-color:before {
display: none;
}
.header-wrap #logo {
padding: 10px 0!important;
text-align: center;
font-family: 'Cookie', cursive;
font-size: 40px;
font-weight: normal;
line-height: 1.1;
}
.header-wrap #logo a {
color: black;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-ms-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
}
.header-wrap #logo a:hover {
opacity: 0.8;
}
.header-wrap #logo img {
display: block;
overflow: hidden;
max-width: 1000px;
max-height: 1000px;
}
.header-wrap #logo #wsite-title {
display: block;
max-width: 1000px;
}
.header-wrap #logo img {
max-height: 1000px;
}
.header-wrap .wsite-logo {
padding: 30px 0 20px;
}
.header-wrap .nav-wrap {
position: relative;
z-index: 6;
width: 100%;
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #cccccc;
text-align: center;
}
.header-wrap .hamburger {
display: none;
}
There's also a mobile.js but it seems to mainly control the nav menu.
Thanks in advance!
I tried making the header-wrap position absolute, but that just caused overlapping text on the mobile view so I changed it back.
Related
I'm trying to get this affect to work on my material ui card component using react and makeStyles and I really dont know how to translate this affect to the cards, can someone help me tranlsate it to a simple css code so I can use it in MakeStyles? I think my problem is that i dont understand the code on the codepen, if some of you have a similiar codepen and can share it, i'd appreciate it, thanks.
https://codepen.io/chrisdothtml/pen/OVmgwK
/* Reset */
#import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
// variables
$anim-speed: 0.3s;
// main styles
.tiles {
width: 1040px;
font-size: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
.tile {
display: inline-block;
margin: 10px;
text-align: left;
opacity: .99;
overflow: hidden;
position: relative;
border-radius: 3px;
box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
&:before {
content: '';
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.7) 100%
);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
transition-property: top, opacity;
transition-duration: $anim-speed;
}
img {
display: block;
max-width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.details {
font-size: 16px;
padding: 20px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
span {
display: block;
opacity: 0;
position: relative;
top: 100px;
transition-property: top, opacity;
transition-duration: $anim-speed;
transition-delay: 0s;
}
.title {
line-height: 1;
font-weight: 600;
font-size: 18px;
}
.info {
line-height: 1.2;
margin-top: 5px;
font-size: 12px;
}
}
&:focus,
&:hover {
&:before,
span {
opacity: 1;
}
&:before {
top: 50%;
}
span {
top: 0;
}
.title {
transition-delay: 0.15s;
}
.info {
transition-delay: 0.25s;
}
}
}
}
The CSS codes you see on CodePen uses SCSS. Click on the CSS Editor dropdown icon -> View Compiled CSS.
Obviously as the name suggests, this will show you the compiled CSS. :)
I've got some css/html code. I wanna improve my "unhover" state by doing following: when I hover over a button there is a before element sliding from left to right. I can easily change it from right to left. However when I do the "unhover" action, before element slides in the opposite direction - from right to left. What I want to achieve is animating it's width from 100% to 0% but from left to right. What should I do to get the result?
https://codepen.io/trueFalse24/pen/YzKNgYm
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
}
}
}
I've modified your pen to get the effect by changing a few usages of the left and right properties. My edits are marked by comments below.
.container{
padding:0;
margin: 0;
box-sizing: border-box;
background: #3498db;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
right: 0; /* Replaced left */
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
right: auto; /* Added */
left: 0; /* Added */
}
}
}
}
This is my modification of someone else's hover effect. So I am not familiar with the working of btn-2 class.(I don't know the syntax used)
Here is my CSS code:
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
body {
background-color: black;
}
a {
text-decoration: none;
color: tomato;
font-size: 50px;
font-family: 'Oswald', sans-serif;
}
.container {
padding: 1em;
text-align: center;
vertical-align: middle;
}
.btn-2 {
letter-spacing: 10px;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 30px;
}
.btn-2:after,
.btn-2:before {
border: 1px solid rgba(tomato, 0);
bottom: 2px;
top: 2px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: tomato;
transition: width 350ms ease-in-out;
width: 50%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 50%;
}
I want to use the effect for button in my navigation bar. But I have 3 problems to solve:
I want the lines above and below the word that appear when you hover it to be of the same width as the word.
I want the word to be centered relative to the line. That is, the line should grow out from the middle point of the word.
The lines isn't going where the word is going.
Some discoveries I make, which I don't know the cause of:
The 2 lines will be longer when .comtainer{padding=1em} than 5em.
When I delete text-align and vertical-align in the .container class, the hovering lines stay centered, but the word goes to the left of the window.
I'm not sure how good I understand you, but here some example I made
a {
color: #333;
display: inline-block;
padding: 15px 0;
position: relative;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
&:before,
&:after{
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 2px;
background-color: #333;
transition: all 250ms ease-in-out;
}
&:before {
top:0;
}
&:after {
bottom: 0;
}
&:hover {
letter-spacing: 5px;
&:before,
&:after {
width: 100%;
}
}
//Trick is here
span {
&:before {
content:attr(title);;
letter-spacing: 5px;
display:block;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
}
}
<span title="Hover Me">Hover Me</span>
You can check my example here
My animation does not seem to want to go both on and off the hover. I have tried putting the animation line on the LI:before itself and swapping the 0% and 100% but then nothing happens at all. I've been messing around with it for hours to no avail.
EDIT: Updated link, code
JSFiddle
ul {
display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
background-color: $base-gray-t;
margin: 1em;
padding: .25em 0 0 0;
height: 3em;
border-bottom: 0.375em solid $secondary-color;
overflow: hidden;
box-shadow: .05em .05em 1em 0;
}
li {
position: relative;
color: $base-gray-light;
padding: 0.40em;
font-size: 1.5em;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
z-index: 2;
}
li:not(.active):not(:first-child):before {
content: '';
display: block;
position: absolute;
bottom: .01em;
width: 100%;
height: 2em;
margin-left: -.4em;
border-radius: .25em .25em 0 0;
z-index: -1;
}
li:hover:before {
background: $primary-color;
animation: splash .3s ease;
bottom: .01em
}
#keyframes splash {
0% {
bottom: -2em;
border-radius: 100%;
}
100% {
bottom: .01em;
}
}
If you are trying to complete the animation which you created on hover then for that add forwards along-with your animation properties as below,
li:hover:before {
background: $primary-color;
animation: splash .3s ease forwards;
bottom: .01em
}
Check this working jsfiddle link.
The transition method is much less involved and has less scope for problems so i edited your fiddle to use that instead:
https://jsfiddle.net/6t8xLssv/1/
I simply transitioned the :before element on hover, except in the case of the active li.
li:before{
content:'';
display:inline-block;
position:absolute;
bottom:0;
right:0;
left:0;
height:0;
transition:height 0.2s linear;
background:pink;
border-radius:5px 5px 0 0;
z-index:-1;
}
li:hover:before{
transition:height 0.2s linear;
height: 2em;
}
li.active:before{
display:none;
}
I hope this helps
I know this is a simple formatting question, but I need to format some text inside a hover box over an image. I want to separate the hover text into two paragraphs, and the hover text is not covering the entire image for some reason...below is my hover CSS:
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
ul.img-list li {
display: inline-block;
height: auto;
margin: ;
position: relative;
width: 100%;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
display: table;
height: 100%;
left: 0;
position: justify;
top: 0;
width: 75%;
}
span.text-content span {
display: ;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
display: table;
height: auto;
left: 0;
position: justify;
top: ;
width:100%;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0,5);
color: white;
display: ;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 2000ms;
-moz-transition: opacity 2000ms;
-o-transition: opacity 2000ms;
transition: opacity 2000ms;
}
You can do something like this code example here: JSFiddle
HTML:
<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>
CSS:
.tooltip {
border-bottom: 1px dotted #0077AA;
cursor: help;
}
.tooltip::after {
background: rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 0px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
color: #FFF;
content: attr(data-tooltip); /* The main part of the code, determining the content of the pop-up prompt */
margin-top: -24px;
opacity: 0; /* Our element is transparent... */
padding: 3px 7px;
position: absolute;
visibility: hidden; /* ...and hidden. */
transition: all 0.4s ease-in-out; /* To add some smoothness */
}
.tooltip:hover::after {
opacity: 1; /* Make it visible */
visibility: visible;
}