I'd like to know why my transition doesn't work in Wordpress while in Codepen it works fine. Hovering on items changes background but it also should do with transition
I am mentally exhausted trying to find out if it's just my stupid mistake or something else in Wordpress could block it.
Here is my codepen
: Codepen
Here is the website I'm applying it to: Wordpress page
change the transition from background to background-image
background-image 350ms cubic-bezier(0.77, 0, 0.175, 1)
.container #picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #f5bf30;
transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);
}
Source: http://css3.bradshawenterprises.com/cfimg/
Edit 1:
Initial background using 1x1px image
.container #picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8ut/gPwAHegLlBdE8JgAAAABJRU5ErkJggg==);
transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);
}
the image used in this example is generated with png-pixel
Edit 2:
I had a look at your implementation of my suggested change,
you want to replace transition: background 1350ms cubic-bezier(0.77, 0, 0.175, 1) !important; with transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1); for the initial setup .container #picture
it works perfect like that when I test it.
and remove the rules you added to .container #picture.one, .container #picture.two, ... etc
Edit 3:
Side by side example showing the difference between color to image and image to image transition;
.square {
width:150px;
height:150px;
transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);
float: left;
margin-right:50px;
}
.example-1 {
background: #f5bf30;
}
.example-2 {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8ut/gPwAHegLlBdE8JgAAAABJRU5ErkJggg==);
}
.example-1:hover, .example-2:hover{
background-image:url(https://via.placeholder.com/150);
}
<div class="square example-1"></div>
<div class="square example-2"></div>
Related
I have a modal for which I have created a backdrop. I want the backdrop to blur everything behind it, but since while showing the modal, there are some FPS drops and looks a bit laggy, I have decided to apply a transition with a delay to it. Unfortunately, the transition doesn't seem to apply to the backdrop-filter property for a reason I was not able to detect.
Here is the CSS applied to the backdrop:
.Backdrop {
background-color: rgba(0, 0, 0, 0.25);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
backdrop-filter: blur(2px);
transition: backdrop-filter 500ms 2s;
}
With this CSS applied, the application of the backdrop-filter property still happens instantly at the moment when the modal is shown. What am I missing?
Transitions enable you to define the transition between two states of an element. Your backdrop never changed state (it had the property backdrop-filter: blur(2px) since the page was loaded), so the transition doesn't take effect.
What you're looking for is an animation:
.backdrop {
background-color: rgba(0, 0, 0, 0.25);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
animation: blur-in 500ms 2s forwards; /* Important */
}
/* Let's define an animation: */
#keyframes blur-in {
from {
backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(2px);
}
}
Some text for testing the blur.
<div class="backdrop"></div>
I'm using Elementor Pro and wanted certain images to zoom within the div container and had a shine on them when hovering, so upon asking for help someone wrote this code for me, but it didn't scale the image. I added the transform property to scale it, but I don't know how to keep it within the container. I also wanted the transition to be smooth so I also added the transition property which doesn't seem to work at all. This is my first time asking asking a question here and I do not have a coding background so I apologize if I say something wrong.
.shine-test::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
content: '';
transition: all 0.6s;
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);
}
.shine-test:hover::before {
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);
}
.shine-test:hover {
transition-timing-function: ease-in-out;
transition-duration: .6s;
}
.shine-test:hover {
transform: scale(1.2)
}
You need JavaScript if you want to change the size of the wrapper, because things changed by scale keeps their original 'box'.
Although if you knew the size you were scaling it to you can do something like this:
Box = 40*40
Scale 1.5 = Box width 60*60
.box {
width: 40px;
height: 40px;
}
.box.scaled {
width: 60px;
height: 60px;
}
.box.scaled > .shine-test {
transform: scale(1.5);
}
I've created a simple modal window (with help) and I understand how it functions to make the background dark after clicking the corresponding link. I can't quite seem to figure out how to make the background-image that I currently have become blurry upon clicking, however. I was hoping to do it fully in css.
Here is what I have so far. What I want the background-image to look like is achieved by using filter: blur(5px);
I think the issue is relating to the fact that I don't entirely understand how the :target function works.
/* Design Modal Window */
/* .modal_style {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px black;
background: rgba(0, 0, 0, 0.8);
z-index: 1;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
} */
Essentially instead of background: rgba(0, 0, 0, 0.8); I want the background to blur, but when I put the filter element in its place it blurs the modal window and not the background.
You can't use blur on the parent, and disable it on the child. You have to create two divs on the same level. Here is an example:
.modal-content{
height:150px;
width:200px;
position: absolute;
background-color:white;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.modal-background{
filter:blur(5px);
position:absolute;
width:100%;
height:100%;
}
<div class="modal-background">
<image src="https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962_960_720.jpg"></image>
</div>
<div class="modal-content">
This a modal
</div>
I'm currently editing a subreddit on reddit.com and my methods are restricted on CSS only.
I managed to get a overlay effect when you hover over the menu on the left side. It's fading in, but I don't know how to fade it out. Since transition wasn't working I tried another method with an animation.
TL;DR: Overlay fade in: yes - fade out: no :(
Here are some parts of the code I used:
#sr-header-area .drop-choices:hover:before {
content: "";
font-size: 13px;
display: block;
position: fixed !important;
height: 100%;
width: 100%;
margin-left: 300px;
pointer-events: none;
z-index: 700 !important;
animation: fade 0.5s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;}
#keyframes fade {
0% {background-color: rgba(0, 0, 0, 0);}
100% {background-color: rgba(0, 0, 0, 0.4);}}
Maybe someone can help me out here.
You should be able to achieve this effect with transitions and that would be the way I'd personally recommend. Heres a quick implementation: https://jsfiddle.net/z1c8bvcd/1/
The main thing to remember is that you need to define the CSS properties that the div will return to once the hover state is no longer in effect, not just what they look like when hovered otherwise the :before pseudo element will be removed from the DOM.
#foo:before {
content: "";
background: rgba(255, 255, 255, 0);
transition: background 0.5s, margin-left 0.5s;
width: 100%;
height: 100%;
position: fixed!important;
margin-left: 50px;
}
#foo:hover:before {
background: rgba(0, 0, 0, 0.3);
margin-left: 300px;
}
I think you can also achieve a similar effect using keyframes, but I think the animation would run once when the page loads and then whenever the div is hovered.
I'm using the following CSS code on my linked images:
a img:hover {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
background: #f00;
}
The idea is that when a user hovers over an image, this will be slightly tinted with red. The browser though seems to ignore the "background: #f00;" property.
What am I doing wrong?
Thanks in advance
It won't work as you are having image, so you need to have an overlay element, probably a div
Demo
HTML
<div class="wrap">
<img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay"></div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
}
.wrap:hover .overlay {
background: rgba(250, 0, 0, .1);
}
Note: You should have a positioned relative container, else your absolute positioned div will run out in the wild, moreover, you can remove display: inline-block; and provide respective height and width to the container element, see to it that it sticks to your image, alternatively you can also use transitions for smooth effect
For transition you need to modify the class like this
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
Demo Transition