i use CSSGrid with an hover effect who works great on desktop, but i have a bug on mobile and can't find the problem.
You can see the page here, and look on desktop on mobile view: http://lafabutineuse.flywheelsites.com/realisations
I defined my image title and link to be absolute and 100% height of the div.
The code of my title on image:
h2 a, h2 {
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center;
padding: 10px;
padding-bottom: 10px!important;
text-align: center;
height: 100%;
z-index: 10000;
transition-property: background;
-webkit-transition-property: background;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}
and same code on hover but with differents colors:
h2 a:hover, h2:hover {
background: rgba(224,197,76,0.61);
color: white;
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center!important;
vertical-align: middle;
padding: 10px;
padding-bottom: 10px!important;
text-align: center!important;
justify-content: center;
display: flex;
height: 100%;
z-index: 10000;
}
I tried some codes to fix the problem but can't achieve to keep the same effect on mobile.
Do you have any idea please?
Thank you
You have not explicitly set position for .et_pb_grid_item on screens smaller then 980px - that's why your hover-link takes 100% of .et_pb_portfolio_items.
Set position: relative; for .et_pb_grid_item and that should fix the hover problem.
.et_pb_grid_item {
position: relative;
}
Related
i don't know what i'm doing wrong here but my nav doesn't stick to top of cart on safari also sometimes it doesn't work on other browsers which i really didn't understand how. I've tried position fixed for nav but none of my tries didn't work. Hope someone can help me to understand the issue here. Thanks in advance.
<div class="cart">
<nav>
...
</nav>
</div>
.cart {
position: fixed;
overflow-y: scroll;
z-index: 10;
width: 100%;
height: 100%;
right: 0;
top: 0;
transform: translateX(100%);
background-color: white;
color: #ffff;
transition: 0.3s;
}
nav {
font-family: abeja;
position: sticky;
position: -webkit-sticky;
z-index: 11;
top: 0;
left: 0;
width: 100%;
padding: 20px;
display: flex;
background-color: #fff;
color: gray;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 13px 0 rgb(230, 230, 230);
}
simply add position: -webkit-sticky;
Try like this
position: sticky;
position: -webkit-sticky;
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 */
}
}
}
}
I have a div called time-box. Sometimes I will also include an additional class called countdown. If countdown is added then I would like to use a CSS transition effect so the background changes to be red over the course of 60 seconds. In other words, each second that passes the red background gets a little wider until eventually all of the green background has gone.
I have found similar posts here but they all seem to relate to hover
Here is a fiddle
https://jsfiddle.net/e2vbheew/
I don't know a "simple" way to get what you want going from left to right, but there's a way you can create it using before and after pseudoelements. The key here is I'm going to create a :before pseudoelement that has the new background that transitions across, and an :after pseudoelement that replicates the content and puts it on top of the before, so it's still visible. This required putting the content in an attribute on the div so I could reference it in the 'content' of the pseudoelement. If you had more complex content inside, you could probably do away with the :after and simply give the internal content position and z-index to make sure it's visible. Here's the resulting CSS
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size:2rem;
padding:0px;
font-size:1.2rem;
text-transform:uppercase;
padding:3px 5px 3px 5px;;
font-weight:600;
height:auto;
position: relative;
}
.time-box:before {
background-color: red;
position: absolute;
left:0;
top: 0;
height: 100%;
width: 0;
content: " ";
transition: width 60s ease;
}
.countdown:after {
content: attr(data-content);
width: 100%;
text-align: center;
height: 100%;
position: absolute;
left: 0;
top: center;
z-index: 1;
}
.countdown:before {
width:100%;
}
And updated fiddle: https://jsfiddle.net/tunzwqd7/2/
Using CSS animation property...
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size: 2rem;
padding: 0px;
font-size: 1.2rem;
text-transform: uppercase;
padding: 3px 5px 3px 5px;
font-weight: 600;
height: auto;
position: relative;
z-index: 1;
}
.time-box.countdown:before {
content: '';
width: 0;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: red;
animation: countdown 60s forwards;
z-index: -1;
}
#keyframes countdown {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="time-box">
12:00
</div>
<div class="time-box countdown">
<span>12:00</span>
</div>
You would need to add a maximum and a little more math to make the 100% divisible by 60, but this should get you on the right track. Currently this code updates every second and adds 1% to the progress bar width with each iteration.
var time = 0;
var bar = document.querySelector('.countdown .progress-bar');
window.setInterval(function(){
time++;
bar.style.width = time+"%";
}, 1000);
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size:2rem;
padding:0px;
font-size:1.2rem;
text-transform:uppercase;
padding:3px 5px 3px 5px;;
font-weight:600;
height:auto;
position: relative;
}
.progress-bar {
display: none;
}
.countdown .progress-bar {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: red;
width: 0%;
z-index: 1;
transition: all 0.3s ease-out;
}
.countdown p {
z-index: 2;
position: relative;
}
<div class="time-box">
<p>12:00</p>
<div class="progress-bar"></div>
</div>
<div class="time-box countdown">
<p>12:00</p>
<div class="progress-bar"></div>
</div>
I have this situation: https://jsfiddle.net/rozkvsdh/5/
A CSS Grid, simply, but in some items, I need to put a ribbon or another div.
It's impossible!
How can I do?
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
}
.ribbon-wrapper {
width: 85px; // the length should be not in px I think!
height: 88px; // the length should be not in px I think!
overflow: hidden;
//position: absolute; it doesn't work!
position: relative;
top: -3px;
left: -3px;
.ribbon {
font: bold 15px sans-serif;
color: #333;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
top: 15px;
left: -30px;
width: 120px;
background-color: #ebb134;
color: #fff;
}
}
you could use a pseudo and a data attribute :
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM
overflow can be used and background-clip can help to mimic ribbon standing a bit outside
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
vmin or vmax units could be used to set font-size to resize the ribbon via em on padding and coordonates.
The viewport-percentage lengths
are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
eventually, shadow can be added and linear-gradient can help to draw slanted shadow's parts.
Demo:
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 2px;
height: 100vh;
padding: 5px;
margin: 0;
box-sizing: border-box;
}
grid-item {
background-color: lightgreen;
background-clip: content-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 3px;
}
grid-item[data-class="new"]:before {
content: attr(data-class);
position: absolute;
font-size: 2vmax; /* update font-size */
top: 0.4em;
left: -1.3em;
padding: 0em 1.5em;
transform: rotate(315deg);
background-color:gold;
/* eventually add some shadow effects */
background-image:
linear-gradient(135deg, black 0.9em, transparent 1.15em),
linear-gradient(-135deg, black 0.9em, transparent 1.15em);
box-shadow: 0 0 3px;
}
<grid-item>see</grid-item>
<grid-item>full</grid-item>
<grid-item>page</grid-item>
<grid-item>then</grid-item>
<grid-item data-class="new">RESIZE</grid-item>
<grid-item>window</grid-item>
<grid-item>to</grid-item>
<grid-item>see</grid-item>
<grid-item>ribbon</grid-item>
<grid-item data-class="new">font&size</grid-item>
<grid-item>updates</grid-item>
<grid-item>F</grid-item>
<grid-item data-class="new">PRO</grid-item>
<grid-item>B</grid-item>
<grid-item>C</grid-item>
<grid-item>D</grid-item>
<grid-item>E</grid-item>
<grid-item>F</grid-item>
<grid-item>A</grid-item>
<grid-item>B</grid-item>
you need to put position: relative; on grid-item and then you can use absolute position on .ribbon-wrapper.
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.ribbon-wrapper {
width: 85px; // the length should be not in px I think!
height: 88px; // the length should be not in px I think!
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
.ribbon {
font: bold 15px sans-serif;
color: #333;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
top: 15px;
left: -30px;
width: 120px;
background-color: #ebb134;
color: #fff;
}
}
https://jsfiddle.net/thesouthstar86/rozkvsdh/6/
You can do it and also works for resize but it's a bit messy.
The spacer divs are there so you have the height. You need one on each side because you want PRO to be centered. We sacrifice 1px on each side to make this work and now ribbon-wrapper can be absolute
https://jsfiddle.net/rozkvsdh/9/
HTML
<grid-item>
<div class="ribbon-wrapper"><div class="ribbon">NEW</div></div>
<div class="spacer"></div>
<div>PRO</div>
<div class="spacer"></div>
</grid-item>
CSS
// this is new
.spacer {
height: 88px;
width: 1px;
}
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
position: relative; // added
}
.ribbon-wrapper {
width: 85px; // the length should be not in px I think!
height: 88px; // the length should be not in px I think!
overflow: hidden;
position: absolute;
top: 0; // edited
left: 0; // edited
}
The ribbon won't align left because it's an in-flow child of a flex container with justify-content: center. So both the ribbon and the content are centered side-by-side.
You can override that setting with margin-right: auto, which will left-align the ribbon, but it will also right-align the content.
You can insert an invisible spacer item to create equal balance in the container, keeping the content centered. But that's a bit involved and may be unnecessary.
Stick with CSS positioning properties. This will position the ribbon. Re-sizing it is another matter:
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
position: relative; /* establish nearest positioned ancestor for abspos containment */
}
.ribbon-wrapper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.ribbon-wrapper .ribbon {
font: bold 15px sans-serif;
color: #333;
text-align: center;
transform: rotate(-45deg);
position: relative;
padding: 7px 0;
top: 15px;
left: -30px;
width: 15vw;
background-color: #ebb134;
color: #fff;
}
revised fiddle
So I have an "in-development" website and I'm seeing a weird issue in Google Chrome (Edge/Internet Explorer is not showing this bug, but works as intended, which is a first!)
The two "Next" and "Previous" controls for cycling through the header images have a z-index of 666 and are floated left and right, but it seems that Google Chrome is not detecting a) the hover event, b) the click (as far as I can tell). I don't know if this is related to the menu at the bottom of the header...
Any help would be much appreciated!
CSS Code below:
#header #coverControls-prev,
#header #coverControls-next {
position: relative;
height: 100%;
width: 100px;
background-color: rgba(0,0,0,0.0);
opacity: 0.25;
text-align: center;
transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
z-index: 666;
}
#header #coverControls-prev:hover,
#header #coverControls-next:hover {
background-color: rgba(0,0,0,0.25);
opacity: 1;
}
#header #coverControls-prev {
float: left;
clear: none;
}
#header #coverControls-next {
float: right;
clear: none;
}
#header #coverControls-prev p,
#header #coverControls-next p {
display: block;
position: absolute;
top: 50%;
margin-top: -50%;
width: 100%;
font-size: 10vmin;
text-align: center;
z-index: 667;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
display: block;
padding: 5px 2vw;
height: 3em;
width: 100vw;
background-color: rgba(255,255,255,0.5);
text-align: left;
white-space: nowrap;
overflow: hidden;
color: #000000;
z-index: 777;
}
Website in question: http://dev1.deliriousdreams.co.uk/
add this to your a tags in css. Your anchor tag needs a width and height. And display:block allows you to add width and height for an anchor tag.
width: 100px;
height: 100px;
display: block;