I use bootstrap`s modal on my site and backdrop opacity is 1. I can change opacity by adding
.modal-backdrop.fade.in {
opacity: 0.7!important;
}
in my .css file. But when I close modal, opacity changes to 1 and then closing - it's look ugly. I understood, that case in div, which appear in bottom of html document when modal is showing,
<div class="modal-backdrop fade in" style="opacity: 1;"></div>
but how to remove this div? And it's occure only on product page on other pages it works fine.
!important should override inline styles: https://css-tricks.com/override-inline-styles-with-css/
In your example you are missing a white space though.
.modal-backdrop.fade.in {
opacity: 0.7 !important;
}
Update
I assume the modal-backdrop is without the in class on close
.modal-backdrop.fade, .modal-backdrop.fade.in {
opacity: 0.7 !important;
}
Related
Surprisingly, after googling this for a bit I found tons of questions about how to fade the background of a div (not the text), but none of the converse. Please point me to one if you can find it.
I'm looking for a way to fade in the contents of a div. For example, I have a modal and if I apply the following rule to it:
animation-name: contentfadein;
animation-duration: 1s;
#keyframes contentfadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
Then it fades in everything (including the modal background itself).
Rather, I would like to only fade in the contents, such that the modal immediately loads and has its white background, but all of the contents of the modal fade in (such as the text, buttons, etc.)
All of the approaches I've tried so far also fade in the background, which I am looking to avoid.
The only thing I could think of is to apply this rule on every.. single.. item.. in the modal, but that would result in hundreds of individual rule additions (and also stop working when a new item is added, until that item is "fixed"), which seems inefficient compared to a better way.
You can apply rules to all component inside an element with css easily. Then you will need to deal with text directly inside your container, you can change the color of your text to transparent.
.container{
background: red; /* won't fade */
}
.container, .container *{
transition-duration: 1s;
}
/* This will apply for all content in .container */
.container:hover * {
opacity: 0;
}
/* OPTIONAL : This will apply for text directly in container */
.container:hover {
color: transparent;
}
<div class='container'>
I'm text directly in container
<p>I'm a paragraphe</p>
<input type='submit' value="I'm a submit button"/>
<div>
<p>I'm in a div and a paragraphe</p>
</div>
</div>
I've put together a very basic tab image gallery and am now in the process of styling it, but am having some trouble getting the 'default' thumbnail to load with max opacity. My jQuery is also messing with my hover css. I did try using the focus/active css to set opacity to 1 on click rather than jQuery, but it didn't seem to work.
Desired effect
The page loads and image 1 is shown in the main image frame. The thumbnail for image 1 has full opacity while the other 3 have opacity:0.8. When hovering over an unselected thumbnail, opacity:1. After clicking a thumbnail, the picture in the main frame changes and the opacity of the newly clicked thumbnail is set to 1 (whilst the opacity for image 1 returns to 80%).
Issues
The 'default' thumbnail loads at 80% opacity rather than 1.
If I add the latter 2 lines to my jQuery (shown below) to set opacity on click, the 'hover' effect stops working after something has been clicked.
jQuery(document).ready(function() {
$(".thumbnail").click(function() {
$("#mainimage").attr("src", $(this).attr("src"));
$(".thumbnail").css("opacity", "0.8");
$(this).css("opacity", "1");
});
})
#thumbnails img {
display: inline-block;
width: 20%;
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
#thumbnails img:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='gallery'>
<div id='panel'>
<img id='mainimage' src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' width=80% />
</div>
<div id='thumbnails'>
<center> <img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' class='thumbnail' style='opacity: 1;'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-puppy-lying-down-on-grass-royalty-free-image-1587052215.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gettyimages-589656325-1-1586896598.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/chihuahua-dog-running-across-grass-royalty-free-image-1580743445.jpg' class='thumbnail'></center>
</div>
</div>
Edit: By setting the opacity of the default image to 1 using <... style=opacity:1;> I'm able to get it to have default opacity on page load. I fiddled around with another jQuery that changed opacity on hover, but this had the negative affect of setting the opacity of the thumbnail that was last hovered over to 1 rather than the one that was last clicked. At this point, the main issue us that my hover css is not working with the jQueryposted above.
When you use jQuery to set a CSS attribute you are adding it inline. Inline styles override CSS styles. The only way to get around this is to stick an !important after the style that you want to override the inline. In your case, its on the hover.
Hierarchy of CSS works like this, in order of importance and priority being rendered. Ie, if 1 isn't there, render 2 and so on:
CSS Style with !Important
Inline style
ID
Specific Class
Less specific class
See working snippet below:
jQuery(document).ready(function() {
$(".thumbnail").click(function() {
$("#mainimage").attr("src", $(this).attr("src"));
$(".thumbnail").css("opacity", "0.8");
$(this).css("opacity", "1");
});
})
#thumbnails img {
display: inline-block;
width: 20%;
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
#thumbnails img:hover {
opacity: 1!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='gallery'>
<div id='panel'>
<img id='mainimage' src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' width=80% />
</div>
<div id='thumbnails'>
<center> <img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' class='thumbnail' style='opacity: 1;'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-puppy-lying-down-on-grass-royalty-free-image-1587052215.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gettyimages-589656325-1-1586896598.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/chihuahua-dog-running-across-grass-royalty-free-image-1580743445.jpg' class='thumbnail'></center>
</div>
</div>
Is there a way to transition a div to be visible by making it visible from the top and then going down?
Example:
#div {
visibility: hidden;
transition: visibility 1s (??);
}
#outerdiv:hover #div{
visibility: visible;
}
Yes you can, but you can´t do fades in and out with the display option, because it doesn´t have a intermediate state. If you want to acheve a opacity fade, you must use the css opacity option, and a trigger for the div to call this changes. The code will look like the following:
CSS:
div{
opacity: 0;
transition: 1s;
}
/*in this case I will use hover as the trigger*/
div:hover{
opacity:1;
}
On the other hand, if you want the div to do the fade in at the moment that the web loads, you will need to create a function in js, that will be called at the moment that the page loads, using onload="function()".
I have a problem with bootstrap carusel-control arrows that change the slides on click. When I click on the arrow on the phone its opacity holds to the value of 1, the default opacity of the arrows is 0.5(when the arrow is not hovered nor it is clicked). I want the carusel-control Arrow to remain opacity 0.5 after being cliked. On the Pc it is solved by the following code:
.carousel-control:focus{
opacity: 0.6;
}
but on the phone it does not work.
I have an example link, but for unknown to me reasons the code above doesnt work on that example: https://jsfiddle.net/borovec/psrxt7ay/25/
Appreciate any help.
Use the below CSS:
.carousel-control:focus, .carousel-control:hover {
opacity: 0.6 !important;
}
.carousel-indicators{
display: none;
}
.row-1{
margin-top:-7vw;
}
I'm trying to fade a Modal in when it's clicked, and have the experience be smooth on mobile devices.
I'm setting both opacity to 0 and display to none. Setting opacity alone isn't enough, as it makes the area underneath unclickable.
#Modal {
display: none;
opacity: 0;
transition: opacity 500ms ease 0s;
}
Fade in Code:
$('#Modal').show();
$('#Modal').css('opacity','100');
However, the Modal doesn't fade in, it simply pops into existence.
Setting a setTimeout here works, but who wants a click delay for the fade in?
What's the best way to fade an element in with an opacity transition without chaining together massive properties like z-index, or some such nonsense?
Toogling display property it's bad way for fade element, Similar topics were already processed e.g: CSS3 transition doesn't work with display property
"display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead."
quotation author:
Hashem Qolami
You should try to do this by deelay like here Animating from “display: block” to “display: none”
or try toogling class like here: http://jsfiddle.net/eJsZx/19/
CSS:
.Modal {
display: block;
opacity: 0;
transition: all 300ms ease 0s;
height: 0px;
overflow: hidden;
}
.ModalVisible {
display: block;
opacity: 1;
height: 50px;
}
Jquery:
$('button').on('click', function () {
$('#ModalId').addClass('ModalVisible');
});
Html:
<div id='ModalId' class="Modal" > content <br> content </div>
<button>show</button>
Why don't you use jQuery's $("selector").fadeIn() method?
The supposedly correct answer above implies that the OP is attempting a transition on display. They are not. Calling show() will set the display property to block. Then setting the opacity should theoretically trigger the transition from opacity:0.
A similar question has been answered here. To quote #WhoTheHellIsThat, the reason the transition is not triggered is...
...because of the way styles are figured out. Style changes are
expensive so they are effectively saved up until they are needed (a
recalc check like .offsetHeight is called or the next frame needs to
be drawn).
However the answer code in that question was Vanilla Javascript, and I couldn't make it work in jQuery. I found another answer that solved it in jQuery, using a class to trigger the transition.
Here is the full CSS...
#Modal {
display: none;
opacity: 0;
transition: opacity 500ms ease 0s;
}
#Modal.fade-in {
opacity: 1;
}
And here is the full JS:
$('#Modal').show(0, function() {
$(this).addClass('fade-in');
});
Here is a fiddle from RoryMcRossan's answer, demonstrating the solution.