I want to show a image preview of a link using CSS. The behavior is something like this, when an user hovers over the link, the image preview appears after 1sec, but on hovering out, the preview is removed immediately. Now to ensure the preview appears after 1sec, I have used the transition property as
transition-property: visibility; transition-delay: 1s. While this is ensuring the preview gets visible after 1sec, it's transition from visible to hidden is also delayed for 1sec for obvious reason. Can I make sure that only the transition from hidden to visible does take 1sec, and not the vice versa using CSS?
You sadly showed no code.
But I assume you had the transition property on a class or id... and the :hover just changing a property, which is good in order to apply the transition on mouse in and out.
Weird thing is you mention the visibility property, which cannot be transitionned because it is not a "number" property. Maybe you meant opacity...
If you have the transition property in the :hover rule... It apply on hover (read on mouse enter) but squarely do not apply no "not hover" (read mouse out).
#target{
opacity: 0;
height: 400px;
width: 400px;
background: blue;
}
#target:hover{
opacity: 1;
transition: 1s;
}
<div id="target"></div>
Related
I have a image that needs preventing people from saving or drag so I use
pointer-events: none;
but then I also want to add hover effect zoom like:
transform: scale(1.5);
Is there a way to achieve this?
You could set pointer-events:none; on the img, but wrap it in another element to trigger the hover action.
.image-wrapper {
display: inline-block;
overflow: hidden;
font-size: 0;
}
.image-wrapper:hover img {
transform: scale(1.5);
}
img {
transition: all .3s ease-out;
pointer-events: none;
}
<div class="image-wrapper"><img src="https://picsum.photos/200/300"></div>
As you've seen, pointer-events: none will stop the element reacting to any mouse movements or clicks at all, which isn't what you want.
To prevent dragging, you can just add the draggable="false" attribute to your image.
To cancel clicks, you can add an event listener to click and then call event.preventDefault() or return false. The quick and dirty way to do this is:
<img draggable="false" onclick="return false;"/>
There are much neater and nicer ways of attaching javascript to your elements, though.
It's important to know that disabling clicking and dragging will not prevent someone who really wants to save your image from saving it - and there's not really anything you can do if someone is really determined. If the user can see the image, the user can save the image. It might make it slightly more annoying, which might be enough for your case.
I am setting up a simple animation to my button icon. The image in the button is supposed to go from 0.25 opacity default to 1 after hovering over it. Works well with chrome/edge, but firefox seems to ignore it (:hover).
The first guess was that firefox somehow does not support opacity. It does, as the default value of image set to 0.25 opacity is respected. There is no need for any prefixes what so ever. Also, the cursor does not change at all. Then thought maybe it is :hover, but that should have been 100% supported since the stone age.
Then it struck me that this could have been due to CSS grid level 2 layout design I am using, which actually is not yet fully implemented in browsers. I had enabled some layout flags in firefox but that has not brought the solution either. Anyhow making this sample shows it has nothing to do with the CSS grid layout.
I tried using javascript but did not help. I guess it is a bad practice anyway.
My last resort attempt was to try and increase specificity - no luck here either, go figure.
button {
padding: 20px 40px;
}
.images {
opacity: 0.25;
}
.images:hover {
opacity: 1;
cursor: pointer;
}
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
I expect the hover over increases the opacity of an image, as well as changes the cursor to pointer. I would be grateful for any feedback.
try this :
button {
padding: 20px 40px;
}
button .images {
opacity: 0.25;
}
button:hover .images{
opacity: 1;
}
button{
cursor: pointer;
}
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
I changed the way you call HTML elements in your CSS. For me it works on firefox 64.0.2 (64 bits).
EDIT:
Firefox does not ignore the :hover event. But the button element steal the priority of all mouse events. That's why inside element, as your <img> can't be hovered. This is simply the way Firefox interprets this code.
You can also have a look on this post.
I've implemented a CSS solution to animate a style that is set inline with the guidance from CSS-Tricks. Also used help from SO to have the text blend with CSS
I have the animation of the label going both ways (on load and reset) but the progress bar itself immediately goes to Zero
The width of the div gets set inline like this:
<div class="progress-black" ng-style="{width:progress}"></div>
And the onload animation is simple
.progress-black {
background: black;
animation: progress-bar .5s linear;
z-index: 2;
}
#keyframes progress-bar {
0% { width: 0; }
}
Here is my jsfiddle
It seems like #keyframe animations need a 100% value, which is set dynamically, so not sure how to express that in CSS.
My particular app has the ability for a user to click 'reset'. Is there a way to have the animation happen back to 0?
You have few problems in your code and there is two solutions for you:
first solution: - and the better one
in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.
you checking if the value "exist" with if (scope.value) and when you reset the width of the progress remain as it was and not changed
you adding .zero class that color
see here
second solution:
1.. in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.
2.. if you have zero class set .progress-black { width: 0 !important; } so the width will be 0 (important because you want it to be stronger then the inline css).
see here
I'm designing a clickable panel for an html app which contains multiple text elements and images.
From what I understand this is generally done with a div. Something like this:
<div class="myButton">
<h2>Text</h2>
<h3>Some more text</h3>
<img ...>
</div>
With a bit of styling and hooking up the click event this works fine but I am having problem with styling the active state:
.myButton {
cursor:pointer;
}
.myButton:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
In this example I'm trying to do a css animation (IE only) but this could really be anything.
The problem is that the active state only works when I click on the div but doesn't work when I click on any of the children of the div.
Here is a JS Fiddle to show the scenario:
http://jsfiddle.net/S9JrH/13/
UPDATE: Thanks to David Thomas for pointing out a typo in the code and confirming that this works in Chrome.
Unfortunately, in IE10 this only works when you click on the lower part of the div, away from the text.
Does anyone know how to get this working properly in IE10?
Currently not possible (I think)
From what I can gather, this is currently not possible as the :active state of a child is not propagated up to the parent div. Both Internet Explorer 10 and Opera 11.64 failed to propagate the :active state up to the parent when testing with div elements.
Fiddle: http://jsfiddle.net/jonathansampson/UrN39/
Workaround
The only other solution that comes to mind would be to use event propagation in JavaScript. Fortunately the events of a mousedown will propagate up on the DOM, and onto the parent div. The following example utilizes jQuery:
$(".myButton").on("mousedown mouseup mouseleave", function(e){
$(this).toggleClass( "active", e.type === "mousedown" );
});
Note here that I have modified the :active pseudo-class to be an actual class .active. This has been tested in IE10 and works. Given the approach, it should work without any problem in just about every major browser.
Fiddle: http://jsfiddle.net/jonathansampson/S9JrH/8/
Why don't you use HTML <button> element. It's created for your case. Div doesn't take focus, while button gets.
You can use the CSS pointer-events: none; on a child element that you would like to disregard mouse events and it will bubble up appropriately to its parent.
I overlay the the element using :after so that children are not clickable.
.myButton:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
opacity: 0;
filter: alpha(opacity=0);
}
.myButton:active, .myButton *:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
I will be honest I have no idea if you can use *:pseudo-selector in IE but chrome you can so it's worth a shot.
Anyone know of a way to get the zOrder to work differently for visual vs mouse events?
I have a <div> element that I am placing higher in the zOrder which is slightly transparent to highlight something but it is interfering with a :hover css style over the original element.
I either need to make the <div> invisible to the mouse or have it's mouse zOrder different from it's visual zOrder. This would be in HTML, never heard of anything that would allow this, anyone else hear anything?
I guess I'm not sure why a sample would be needed for this but it would be something like this:
<style>
#a1:hover {
background-color: red;
}
#c1 {
position: absolute;
z-index: 10;
width: 100px;
height: 100px;
opacity: 0.3;
background-color: green;
}
</style>
<div id="a1">
<span id="b1">Sample</span>
</div>
<div id="c1"> </div>
The above sample probably only serves to complicate the question, however the div#c1 is position over the rest of the elements in a higher z-order with a transparent green color.
I would like the div#a1:hover css style to still have effect when the mouse is over the a1, in the above example the div#c1 is also in the same position and so it receives the :hover effect (if there were one). I would like to have div#c1 to have a different mouse z-order such that mouse events 'pass through' it to the underlying elements (causing the a1:hover to occur)
[I need] to make the <div> invisible to the mouse
overlay on clickable region - CSS
How to make an element transparent to clicks but still visible?
You can use pointer-events:
none.
It works "everywhere" (Chrome,
Firefox, Safari) except Internet
Explorer (and Opera, if that matters).
http://jsfiddle.net/QC5Yw/
In the likely case that the browser support for pointer-events isn't acceptable, you'll have to use JavaScript.