Background image transition is not working on mozilla [duplicate] - javascript

I am trying to find an alternative for this:
"transition:background-image 1s whatever"
in firefox since it only works on webkit browsers.
I already tried the opacity alternative but thats not an option for me since i have content on the background container which will disappear along with the background if using opacity.
Thank you.

You can do that using 2 pseudo elements
CSS
.test
{
width: 400px;
height: 150px;
position: relative;
border: 1px solid green;
}
.test:before, .test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 1;
}
.test:before {
background-color: red;
z-index: 1;
transition: opacity 1s;
}
.test:after {
background-color: green;
}
.test:hover:before {
opacity: 0;
}
fiddle with real images
(hover to transition)
To be able to see the div content, the pseudo elements need to be in negative z-index:
fiddle with corrected z-index
looks like IE won't trigger this hover
.test:hover:before {
opacity: 0;
}
but will trigger this one
.test:hover {
}
.test:hover:before {
opacity: 0;
}
(As SILLY as it seems)
fiddle for IE10

Easiest solution making use of hover
.self-pic {
height: 350px;
width: 350px;
position: relative;
border-radius: 1rem;
}
img {
position: absolute;
left: 0;
transition: opacity, 1s;
}
img.front:hover {
opacity: 0;
}
<div id="self-pic">
<img class="back" src="https://source.unsplash.com/random/350*350" />
<img class="front" src="https://source.unsplash.com/random/351*351" />
</div>

It does work
You can see it here : http://dabblet.com/gist/1931619
But apparently Firefox hasn't implemented it yet.

#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Does this not do it? Just need to change the all to background-image.

Related

CSS Transition on newly created psuedo element

I want to create a fade effect on a pseudo element but am having difficulty as i cannot use javascript on this element.
I have an example of something similar to what i am trying to do here but i cannot get the element to fade in as transitions do not seem to work when the element is created.
https://codepen.io/anon/pen/wrxPXJ
.hoverhere.dim::before {
content: '\A';
position: absolute;
width: 100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.8);
opacity: 1;
transition: opacity 1s;
}
I am adding a class to a div so that the pseudo element is created after matching with the above css however cannot work out how to animate this.
I can probably get it to work without psuedo elements like below:
https://codepen.io/anon/pen/Oxwzvv
However was wondering if there is a way without changing my markup to include an empty div.
I guess you're saying you want this?
$('.hoverhere')
.mouseenter(function() { $(this).addClass('dim'); })
.mouseleave(function() { $(this).removeClass('dim'); });
.hoverhere {
width: 100%;
height: 40px;
background: red;
color: white;
text-align: center;
}
.hoverhere::before {
content: '\A';
position: absolute;
width: 20%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transition: all 1s ease-out;
}
.hoverhere.dim::before {
opacity: 1;
visibility: visible;
transition: opacity 1s ease-out;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<p>RANDOM TEXT HERE</p>
<div class="hoverhere">HOVER ON ME</div>
<p>MORE RANDOM TEXT HERE</p>
What it needed was to have a starting point established for the opacity.
If this is just for hovering, you don't need the JS at all.
.hoverhere {
width: 100%;
height: 40px;
background: red;
color: white;
text-align: center;
}
.hoverhere::before {
content: '\A';
position: absolute;
width: 20%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transition: all 1s ease-out;
}
.hoverhere:hover::before {
opacity: 1;
visibility: visible;
transition: opacity 1s ease-out;
}
<p>RANDOM TEXT HERE</p>
<div class="hoverhere">HOVER ON ME</div>
<p>MORE RANDOM TEXT HERE</p>

Transition jQuery addClass and removeClass

I'm trying to achieve an overlay on divs when i hover them.
Basically i'm adding a class on mouseover and removing the class on mouseleave.
The problem is that i cannot make a transition since the main effect of the class belongs to the :after pseudo element.
I'm actually targeting the div with a placeholderclass called .img-target
CSS
.img-overlay{
height: 100%
width: 100%
transition: all 1s ease;
}
.img-overlay::after{
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, .3);
transition: all 1s ease;
}
jQuery
$(window).ready(function() {
$(".img-target").mouseover(function() {
$(this).addClass('img-overlay',1000);
});
$(".img-target").mouseleave(function() {
$(this).removeClass("img-overlay");
});
});
I've already tried to apply a transition to the :after and to the .img-target but nothing seems to be working.
Any ideas? :)
P.S. unfortunately using after pseudo element is actually the only way to overlay the div becouse of the theme structure.
Your problem is the :after pseudo element does not have an initial state
$(window).ready(function() {
$(".img-target").mouseover(function() {
$(this).addClass('img-overlay', 1000);
});
$(".img-target").mouseleave(function() {
$(this).removeClass("img-overlay");
});
});
.img-target {
position: relative;
background-color: gold;
height: 50px;
width: 50px;
transition: all 1s ease;
}
.img-target::after {
content: "";
display: block;
transition: all 1s ease;
}
.img-overlay::after {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, .3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-target"></div>
if you are only using jQuery for the mouse in and our detection you can use CSS instead .img-target:hover::after {...}:
.img-target {
position: relative;
background-color: gold;
height: 50px;
width: 50px;
transition: all 1s ease;
}
.img-target::after {
content: "";
display: block;
transition: all 1s ease;
}
.img-target:hover::after {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, .3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-target"></div>

Slide div from minus top value

I'm a beginner to jquery. I want to make a simple fadeindown when I click a button, but from the above the screen,e.g. minus top value. But what I get is only sliding in the page, not from above. And it only works once when I load the html. After that, opacity is the only one working. Here's the sample code:
#Page {
opacity: 0;
width:70%;
min-height: 300px;
background:white;
text-align: center;
border-radius: 20px;
position:relative;
padding:20px;
margin:0 auto;
}
in document.ready(), when I load the html
$("#Page").position().top=$("#Page").outerHeight()*-1;
$("#Page").animate({top:$(".row").outerHeight(),opacity:'1'},1500);
and the .click function
$("#Page").css('opacity','0');
$("#Page").position().top=$("#Page").outerHeight()*-1;
$("#Page").animate({top:$(".row").outerHeight(),opacity:'1'},1500);
it seems only in document.ready that my fadeindown works. Anyone know the reason?
N.B: I try it only in my browser,not hosting it,not even at localhost
Just use css:
#Page {
position: relative;
top: 0;
opacity: 1;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
}
.hidden-element {
position: relative;
top: -100px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
And then JQuery to hide element:
$("#Page").addClass('hidden-element');
And to show:
$("#Page").removeClass('hidden-element');

Having packery grid items have opacity layer over them for hovering

I am trying to mimic this animation over my grid items in my packery grid when the user hovers over them (note the grid items contain background images):
http://thefoxwp.com/portfolio-packery-4-columns/
To do this they use the technique highlighted here:
https://jsfiddle.net/q0d2rqt0/5/
where a overlay div is hidden underneath another div to act like another layer on top of it:
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
.overlay:hover {
opacity: 1.0;
}
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
I am trying to accomplish this with my packery grid, but I am unsure how I can accomplish this because I do not know how to make my overlay div layer move along with my packery grid when it acts responsively.
I can identify the hover effect over each item in the grid fine with:
$container.on('mouseenter', ".item", function (event) {
var target = event.target;
var $target = $(target);
//code here to make the opacity adjustment to white on hover on
});
$container.on('mouseleave', ".item-", function (event) {
var target = event.target;
var $target = $(target);
//code here to make the opacity adjustment reverse when hover away
});
So I have identified the hovering mechanism here with the correct grid item no matter where its location is, but I am having trouble with the CSS to make the opacity go to white on hover without an overlay div layer.
Item Css:
.item1 {
padding: 5px;
width: 250px;
height: 250px;
-webkit-filter: saturate(1);
filter: saturate(1);
}
.item-content1 {
width: 100%;
height: 100%;
background-size: 100% 100%;
border:1px solid #021a40;
-webkit-transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-o-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
}
.item1.is-expanded {
width: 375px;
height: 400px;
}
.item1:hover {
cursor: pointer;
}
.item1:hover .item-content1 {
}
.item1.is-expanded {
z-index: 2;
}
.item1.is-expanded .item-content1 {
}
.item1.is-viewed {
opacity: 0.8;
-webkit-filter: sepia(1) hue-rotate(200deg);
filter: sepia(1) hue-rotate(200deg);
}
Any idea? Can I simply add something to image: hover with a webkit transition? Am I misunderstanding the concept of an opacity layer here since I am using a background image for my grid? The problem seems to be that background image is not animatable.
If i understand correctly,
Best practice is to use a container with 'overflow:hidden', and hide the masked content with 'transform: translate' with height equal to the container. 100% width will work responsively with any content.
codepen
css:
.container {
width: 300px;
position: relative;
margin: 0 auto;
height: 300px;
overflow:hidden;
}
.org-content {
background: red;
height: 300px;
}
.mask {
height: 300px;
top: 300px;
width: 100%;
background-color: #3aa6db;
opacity: 0;
transition: all ease-in 0s;
left: 0;
overflow: hidden;
position: absolute;
pointer-events: none;
}
.container:hover>.mask {
opacity: 1;
transition: all ease-out 0.2s;
transform: translate(0px, -300px);
transition: all ease-in 0.25s;
}
html:
<div class='container'>
<div class="mask">
masked content
</div>
<div class='org-content'>
original content
</div>
</div>

Full page overlay appears behind

I am trying to create a simple full page overlay with bootstrap.
However the overlay is appearing 'behind' my main content (a blue box in the example).
I'm sure I am missing something very obvious however any help would be appreciated.
I need to overlay to disappear when the page is clicked anywhere, this is working.
I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?
HTML
<div class="overlay overlay-data">
<p>click anywhere to close this overlay</p>
</div>
<div class="col-md-4">
<div class="menu-item blue">
<p>MY INFO BOX</p>
</div>
</div>
JS
$(document).ready(function () {
$(".overlay").addClass('overlay-open');
$("section").addClass('blur');
});
$(document).on('click', '.overlay', function () {
$(".overlay").removeClass('overlay-open');
$("section").removeClass('blur');
});
CSS
.blur {
-webkit-filter: blur(2px);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
}
.overlay p {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 0.5;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.blue {
background: #28ABE3;
}
.menu-item {
padding-top: 45px;
padding-bottom: 45px;
margin-bottom: 45px;
transition: all 0.3s;
border: 5px solid transparent;
}
Specify the z-index in your css to be greater than your main content.
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
}
JSFiddle
Read more about it at MDN, z-index.
Use z-index to add overlay effect use this css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index:99999
}

Categories