I have a div that I want to be visible as :target using css. This is working fine so far. My problem is: I want it to be faded in and out.
My code:
<div id="stuff">
Content
</div>
#stuff {
opacity:0;
transition: opacity .5s ease-in-out;
}
#stuff:target {
opacity:1;
}
So let's say on the following url it should fade in (what it does):
example.com/example.htm#stuff
But when I change the url to the following (or anything else), it just becomes invisible without a transition:
example.com/example.htm#
Note that I want to change the url by clicking on a link, not by modifing it via JavaScript.
My question is:
Is it possible to have a transition when changing the target for the previous target without the use of JavaScript? How would you accomplish it?
I do not want to use any JavaScript at all, if possible.
I just changed the value of the opacity property and it's working. As far as I know, opacity only accepts a decimal value between 0 and 1 (apart from inherit, initial and unset).
#stuff {
opacity:0;
transition: opacity .5s ease-in-out;
}
#stuff:target {
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stuff">
Content
</div>
Add hash
Remove hash
Related
So I have a custom expandable select. I want to apply two different transitions, one for the opening and one for the closing of the select.
.select-generic-2 {
max-height: 39px;
overflow: hidden;
z-index: 2;
transition: z-index 0s, max-height .25s ease-in-out 0s;
}
.select-generic-2.expanded {
z-index: 3;
max-height:1000px;
transition: max-height .25s ease-in-out 0s, z-index 0s .25s;
}
Here's the HTML structure of my custom select
<span class="select-generic-2 shadow-input">
<input type="radio" name="status" value="3" id="3">
<label for="3">text</label>
<input type="radio" name="status" value="4" id="4">
<label for="3">text2</label>
</span>
I am toggling the .expanded class with JS, but always the first transition property is executed. I want to change the z-index in such way to avoid overlapping with other elements with the same .select-generic-2 class (only one element has the .expanded class at a time). Any suggestion will be very welcome!
EDIT: I just realized that the problem is different and not related to the transitions. Just every single select has a default z-index value of 2 and when the .expanded class is removed the select boxes located under the collapsing are appearing over it because they have the same z-index (2) and are put over the collapsing (which is located above them in the code) by the browser.
Since you want to toggle the .expnaded class, use the class alone, then use your JS to add or remove the class on 'toggle'.
.select-generic-2 {max-height: 39px; overflow: hidden; z-index: 2; transition: z-index 0s, max-height .25s ease-in-out 0s;}
.expanded {z-index: 3; max-height:1000px; transition: max-height .25s ease-in-out 0s, z-index 0s .25s;}
Then on 'toggle', get the element from DOM and use add the class '.expanded'
To add class: https://www.w3schools.com/howto/howto_js_add_class.asp
To remove class: https://www.w3schools.com/howto/howto_js_remove_class.asp
Well guys I just added a new class called .collapsing which looks like this:
.select-generic-2.collapsing {
z-index: 1;
transition: z-index 0s 0s, max-height .25s ease-in-out 0s;
}
It is called when another select is being open and is removed when the expansion of the another select is complete.
The JS looks like this:
const select = document.querySelectorAll('.select-generic-2');
//this is inside the event listener
selected = this;
select.forEach(function(el){
if (el != selected){
el.classList.remove("expanded");
el.classList.add("collapsing");
setTimeout(function(){
el.classList.remove("collapsing");
}, 250);}
});
A little bit cheesy solution, but it works!
I have a codepen here: https://codepen.io/tylerjms7/pen/ZEEvRyV where I've used the :target pseudo class as a way of opening and closing a modal.
The problem is when I take that exact same code and apply it to a Wordpress site here: https://goals.brandoncollins.org/test-target it doesn't work.
Basically the styles aren't being applied to the :target element for some reason. But I can't figure out why. The thing that is weird is that if I open that link in a new tab with the #creategp at the end the style will work initially to open the modal. When I click the close icon it also works to remove the styles and hide the modal as expected. But then clicking the modal again won't work just as before.
So why aren't the styles being applied? Also, why are they being applied on a new tab?
Open Modal
<!-- The Modal -->
<div id="creategp">
<div class="ty-modal">
X
<p>Modal Content</p>
</div>
</div>
#creategp:target {
opacity: 1;
visibility: visible;
transition: opacity 1s, visibility 1s;
}
#creategp:target {
opacity: 1;
visibility: visible;
transition: opacity 1s, visibility 1s;
}
When I run this in Codepen I get exactly what I want. But when I add these same HTML and styles to my wordpress site it doesn't work unless I open it in a new tab. And then it only works once.
I had some debug with chrome tool and your CSS code didn't work because of this:
goals.brandoncollins.org/wp-content/themes/pro/framework/dist/js/site/x.js?ver=3.0.4
When I block request for that js url:
I have been playing with pseudo selectors and trying to figure stuff out.
This is the general look of the element I am trying to work on:
<div class=simpleGallery>
<a href="...">
<img data-attachment-id="some_number" ........>
</a>
</div>
I am trying to get text to show on a picture with a specific attribute (data-attachment-id for example). I managed to get it by searching for a href that ends in a unique way. Like this...
.simpleGallery a[href$="GP120094-1.jpg"]:before{
content:'Hokus Pokus';
position:absolute;
bottom:25%;
opacity:0;
width:100%;
text-align:center;
color:#fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-moz-transition: all 1.2s ease;
-webkit-transition: all 1.2s ease;
transition: all 1.2s ease;
}
And then I get the text to show with:
.simpleGallery a:hover:before{
opacity:1;
z-index:1;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
It all works, but I was wondering why it won't work with something like this:
.simpleGallery a:before img[data-attachment-id="some_number"]
How would it be done by the image data-attachment-id instead of href in the <a> tag?
And why?
Is it because the :before can only go after the last element I am looking for?
.simpleGallery a:before img[data-attachment-id="some_number"]
Is saying:
1.) find an element with the class "simpleGallery"
2.) find a descendant anchor tag
3.) target that element's :before pseudo element
4.) find a descendant img tag of that pseudo element who's data-attachment-id is equal to "some_number"
The problem here is that pseudo elements are not real elements on the dom (hence pseudo) so they don't have children, siblings, decedents, etc. so your selector is invalid.
How would it be done by the image data-attachment-id instead of href
in the tag?
Exactly how you have it: img[data-attachment-id="some_number"]
<div class="logoWrap">
<img src="https://i.imgur.com/OBFbjSK.png">
<p class="logoDesc">this is img desc</p>
</div>
I want to avoid using javascript, is it possible to change the value of other element using :hover? if possible I want to add transition.
http://jsfiddle.net/UH2Aq/
Do you mean that you want the hover on the logoWrap to make the logoDesc appear?
If so:
http://jsfiddle.net/wildandjam/emELN/
.logoWrap:hover .logoDesc{
opacity:1;
}
Then, if you want, you can add a CSS3 transition, to make it more fluid.
Same answer with transition : http://jsfiddle.net/UH2Aq/1/
.logoDesc{
transition: opacity .2s ease-in-out;
opacity : 0;
}
.logoWrap:hover .logoDesc {
opacity: 1;
}
I've got two divs, div 1, and underneath it is hidden div 2. When I hover over div 1, I want it to hide, and show div 2. Then, once I mouse off of the area (now div 2), div 1 is displayed again.
Here is the code:
<a href="javascript://" class="hoverable">
<div class="normal" style="background:#666;">Hover over me!</div>
<div class="hover" style="background:#888;">Now you see me!</div>
</a>
and here is the css:
<style>
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
}
.hoverable .hover {
display:none;
}
.hoverable:hover .normal {
display:none;
}
.hoverable:hover .hover {
display:block;
}
</style>
My only problem with this is that is is very quick, cut and dry, and not very "fancy". I'd like to add something simple like a fade effect.
I've gotten this working, without the fade effect, here:
http://jsfiddle.net/pBDGW/
If anyone knows how to make those two divs transition with a fade-out, please let me know!
You can use CSS transition with opacity like this:
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
position: relative;
display: block;
}
.hoverable .hover {
opacity:0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.hoverable .hover,
.hoverable .normal{
transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
}
.hoverable:hover .normal {
opacity:0;
}
.hoverable:hover .hover {
opacity:1;
}
You can see the jsfiddle here: http://jsfiddle.net/pBDGW/12/
Some explanation:
The transition applied to both div are the main code that make them fade in & out. You can read more about it here: http://css3.bradshawenterprises.com/transitions/
Since you want the first div to fade out, and the second div to fade in, there will be a moment when both div have to be visible partially, hence position: absolute and some positioning on the second div (to make it overlap with the first div).
You are wrapping an anchor (<a>) around both div, which is actually not encouraged, so I have to give it display: block; . A better approach (HTML-wise) is to wrap both div inside another div (still use the same class hoverable), and use 2 different anchors inside each div.
EDIT: this approach http://jsfiddle.net/pBDGW/14/ works too. Here you only fade out the first div, while the second div is always visible but is hidden under the first div when not hovering. It is shorter css, but I don't recommend this approach though because I sometimes have issues with getting the first div to go on top on different browsers.
You can use jQuery, it has functions fadeIn and fadeOut and also its easy to hide() and show() on events mouseOver and mouseLeave.
You can see fiddle here.
$(document).ready(function(){$(".hover").hide();
$(".normal").mouseover(function(){
$(".normal").fadeOut(0);
$(".hover").fadeIn(1000);
});
$(".hover").mouseout(function(){
$(".normal").fadeIn(1000);
$(".hover").fadeOut(0);
});});
You can use transitions:
ADD THIS TO YOUR :HOVER
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
This adds the effect of fade IN/OUT
Addition: this will only work if you have property set for :hover, for example if you want to change the color, or background or what ever..