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>
Related
I am have made a heading (the word Welcome) that reveals itself once the page has loaded (onload="").
Fiddle in case the code below doesn't work.
function animate() {
document.getElementById("mainText").style.width = "100%";
}
#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 0%;
transition: width 2s;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
The CSS and Plain JS work fine but I want the word "Welcome" to be revealed right side first and then moving along, so from the e to the W, instead of how it currently is, which opens left to right.
I have tried text align: right;, but this doesn't change anything.
I preferably don't want to use any jQuery, if the solution is a JS one.
An example of what the desired look should be, half way though the transition:
You can use the clip-path property to clip parts of the element so they are not visible. This property can also be animated to reveal the element again, using the forwards keyword in the animation so it stays in it's 'revealed' end state.
The inset takes values that are in order: from-top, from-right, from-bottom, from-left.
#text {
margin: 0;
font-size: 100px;
animation: reveal 2s forwards;
}
#keyframes reveal {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}
<h1 id="text">Welcome</h1>
Yes, it is possible using Transitions and Positions:
window.onload = function () {
document.querySelector("h1").classList.add("active");
};
h1 {
overflow: hidden;
display: inline-block;
position: relative;
}
h1 .mask {
position: absolute;
transition: all 0.5s linear;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #fff;
}
h1.active .mask {
right: 100%;
}
<h1><span class="mask"></span>Welcome</h1>
I just wrote an article about this - CSS Transitions & JavaScript for Animated Entry Effects. Hope it is useful... :)
One option is transform: translate with a pseudo element, and no extra element needed.
function animate() {
document.getElementById("mainText").classList.add('show');
}
#mainText {
position: relative;
margin: 0px;
display: inline-block;
font-size: 100px;
white-space: nowrap;
text-overflow: clip;
overflow: hidden;
}
#mainText::after {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: white;
transition: transform 2s;
}
#mainText.show::after {
transform: translateX(-100%);
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
Another option, an even better solution, using the pseudo with direction and left/width.
This one work in the same way clip-path does, completely transparent against its background, as opposite to having a mask that revels the text, and with much better browser support.
function animate() {
document.getElementById("mainText").classList.add('show');
}
body {
background: black;
}
#mainText {
position: relative;
margin: 0px;
display: inline-block;
font-size: 100px;
white-space: nowrap;
color: rgba(0, 0, 0, 0);
}
#mainText::before {
content: attr(data-text);
position: absolute;
left: 100%;
top: 0;
width: 0;
height: 100%;
color: white;
direction: rtl;
overflow: hidden;
transition: left 2s, width 2s;
}
#mainText.show::before {
left: 0;
width: 100%;
}
<body onload="animate()">
<h1 id="mainText" data-text="Welcome">Welcome</h1>
</body>
Something like this
function animate() {
document.getElementById("overlay").style.width = "0%";
}
#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#overlay{
width: 100%;
position:absolute;
top:0;
left:0;
background:#fff;
transition: width 2s;
height:100%;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
<div id="overlay"></div>
</body>
This will require a pseudo-element with a background on top of your heading serving as a mask. Instead of altering the inline styles I will simply add a class is-active. So everything style related can be styled via CSS.
function animate() {
document.getElementById("mainText").className = "is-active";
}
#mainText {
margin: 0px;
display: inline-block;
position: relative;
font-size: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#mainText:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background: #FFF;
transition: width 2s;
}
#mainText.is-active:before {
width: 0%;
}
<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>
I use Transform: translateX to achieve the desired effect.
It slides the text sideways or horizontally on the X axis.
.message {
color: darkred;
font-size: 30px;
display: inline-block;
font-weight: 100;
font-family: sans-serif;
}
.sliding-text-1,
.sliding-text-2,
.sliding-text-3 {
animation-name: slide;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
.sliding-text-2 {
animation-delay: 2s;
color: darkblue;
}
.sliding-text-3 {
animation-delay: 4s;
color: darkgreen;
}
#keyframes slide {
from {
transform: translateX(200px);
}
to {
transform: translateX(0px);
opacity: 1;
}
}
<h1 class="message sliding-text-1">Hello!</h1>
<h1 class="message sliding-text-2">Thanks for visiting!</h1>
<h1 class="message sliding-text-3">Have a nice day!</h1>
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>
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.
I need a "special" animation and i am not finding how i will get this sort of animation i seek for, on each triangle should make the same animation, one to the left and one to the right, i need the right way to start making this. Do i use JQuery for this ?
The animation: I want the triangles to move more or less to the middle of screen in order to show the content that is hidden, as it happens here: beepi.com/default.aspx on the circles
I currently have this:
#anim {
z-index: 1;
position: relative;
height: 100%;
min-height: 100%;
background-image: url("http://i.imgur.com/EPM2arR.jpg");
background-image: no-repeat;
background-size: 100%;
}
#anim img {
z-index: 2;
position: relative;
height: 100%;
width: 100%;
}
.arrow-left {
text-align: left;
padding: 1.5% 12px;
text-transform: uppercase;
position: absolute;
width: 13%;
left: 0;
z-index: 3;
top: 40%;
}
.arrow-right {
text-align: right;
padding: 1.5% 15px;
text-transform: uppercase;
position: absolute;
width: 13%;
right: 0;
z-index: 3;
top: 40%;
}
.arrow-right h2 {
font-size: 28px;
color: #FFF;
}
.arrow-left h2 {
font-size: 28px;
color: #FFF;
}
<section id="anim">
<img src="http://i.imgur.com/AeCYNqc.png">
<div class="arrow-right">
<h2>Scouting For Companies</h2>
</div>
<div class="arrow-left">
<h2>Seeking For Ideas</h2>
</div>
</section>
The animation should be like this:
If I understood well, you need css animation. You can use something like this:
/* For right side */
.arrow-right{
animation: aniright 3s ease;
animation-fill-mode: forwards;
}
#keyframes aniright {
from { right: 0; }
to { right: 13%; }
}
/* For left side */
.arrow-left{
animation: anileft 3s ease;
animation-fill-mode: forwards;
}
#keyframes anileft {
from { left: 0; }
to { left: 13% }
}
I believe you will need to cut and put arrows from image in .arrow-left and .arrow-right classes together will all other elements you want to slide in.. and also put some action to call animation. For e.g:
.arrow-left:hover{
animation: anileft 3s ease;
animation-fill-mode: forwards;
}
... will start animation when your cursor goes over .arrow-left element.
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
}