I'm wondering if there is any way to override just the transition-property that I define with the following statement:
transition: all 0.2s;
I would like to override transition-property to:
transition-property: width, height, opacity, font-size;
However, when I add the second line after the first, transition won't work. Why is that?
The reason why I'm trying to do that is because my transition won't work on Safari 5.1 if I define it with all, so I want to override property all with individual properties just for the webkit support.
you could also use just one property
div {
transition: width 2s, height 2s, font-size 2s,opacity 2s;
width: 200px;
height: 200px;
opacity: 1;
font-size: 20px;
background-color: red;
}
div:hover {
width: 400px;
height: 400px;
opacity: 0.8;
font-size: 40px;
background-color: blue;
}
<div>Hello</div>
if(Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0){
var div = document.getElementById("idName");
div.style.transition-property = "width:value,height:value,opacity:value, font-size:value;";
}
Use this in javascript function to check if the browser is Safari and set the style to that particular element
It works for me
div {
transition: all 2s;
transition-property: width, height, opacity, font-size;
width: 200px;
height: 200px;
opacity: 1;
font-size: 20px;
background-color: red;
}
div:hover {
width: 400px;
height: 400px;
opacity: 0.8;
font-size: 40px;
background-color: blue;
}
<div>Hello</div>
Related
SOLUTION:
The solution I found is using two divs on top of each other(to make the function clearer I made one of the divs red), while it has to animate two divs for the effect, it should still be cleaner and faster than using javascript:
.outerDiv {
width: 100%;
height: 50px;
position: relative;
}
.hover1 {
height: 50px;
width: 50px;
background: black;
position: relative;
top: 0px;
transition: width 1s
}
.hover2 {
height: 50px;
width: 50px;
background: red;
position: relative;
top: -50px;
transition: width 1s 1s
}
.outerDiv:hover .hover2 {
width: 100%;
transition: width 0s 0.9s;
}
.outerDiv:hover .hover1 {
width: 100%;
transition: width 1s;
}
<div class="outerDiv">
<div class="hover1"></div>
<div class="hover2"></div>
</div>
This can be achieved by specifying different transition time for the normal state and hover state.
<style>
#hoverDiv {
height: 50px;
width: 50px;
background: black;
transition: width 5s; /*Specify required time.
This affects how long it takes to transition
back to the normal state*/
}
#hoverDiv:hover {
width: 100%;
transition: width 2s; /*This affects how long it takes to transition
into the hover state*/
}
</style>
<div id="hoverDiv"></div>
Also, if you want to add a delay before width decreases back to normal, try
#hoverDiv {
height: 50px;
width: 50px;
background: black;
transition: width 5s;
transition-delay: 5s; /*Waits for 5 seconds and then decreases
back to normal size in 5 seconds*/
}
how to remove the transparency/opacity of the <img> element when the user hovers over it with the mouse pointer?
Opacity value is 1 by default, so you have to change it to less than 1 then on hover selector you make again 1.
something you have to be aware of that all child elements will be effected by the parent div opacity.
to make cooler you can use transition: all 0.5s ease; for example with it
Read more about it here ( Css transition)
More about css opacity here
div {
height: 40px;
width: 100px;
background: #007cb0;
padding: 10px 20px;
color: white;
line-height: 40px;
text-align: center;
opacity: .4;
}
div:hover {
opacity: 1;
}
<div>Hover</div>
Set opacity: 1; on hover (:hover) element
opacity: 1 is default definition that mean without any opacity
Learn about :hover:https://www.w3schools.com/cssref/sel_hover.asp
img {
opacity: 0.5;
}
img:hover {
opacity: 1;/* To remove opacity */
}
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Forest" width="170" height="100">
I have an tag which is displayed as a block. On page load, its width is increased by a css animation from zero to some percentage of the containing div (the fiddle contains a MWE, but there is more than one link in this div, each with a different width). On hover, I want it to change colour, change background colour, and also expand to 100% of the div, using a CSS transition. The colour and background colour bit is working, but it seems to ignore the width transition.
Snippet:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-duration: 1.5s;
animation-fill-mode: forwards;
transition: color, background-color, width 0.2s linear;/*WIDTH IGNORED*/
border: 2px solid #5e0734;
overflow: hidden;
white-space: nowrap;
margin-right: 0;
margin-left: 5px;
margin-top: 0;
margin-bottom: 5px;
padding: 0;
}
.home-bar:hover {
background-color: #5e0734;
color: white;
width: 100%;/*WIDTH IGNORED*/
text-decoration: none;
}
#bar0 {
-webkit-animation-name: grow0;
animation-name: grow0;
}
#keyframes grow0 {
from {
width: 0%;
}
to {
width: 75%;
}
}
LINK
Note - I've tested it with changing the height of the link on hover, and it worked. Only the width does not work. Perhaps it has something to do with the animation on page-load.
When you set width using animation you will override any other width defined with CSS inluding the one defined by hover. The styles inside a keyframes is more specific than any other styles:
CSS Animations affect computed property values. This effect happens by
adding a specified value to the CSS cascade ([CSS3CASCADE]) (at the
level for CSS Animations) that will produce the correct computed value
for the current state of the animation. As defined in [CSS3CASCADE],
animations override all normal rules, but are overridden by !important
rules. ref
A workaround is to consider both width/max-width properties to avoid this confusion:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
animation: grow0 1.5s forwards;
transition: color, background-color, max-width 0.2s linear;
border: 2px solid #5e0734;
max-width: 75%; /*Set max-wdith*/
}
.home-bar:hover {
background-color: #5e0734;
color: white;
max-width: 100%; /* Update the max-width of hover*/
text-decoration: none;
}
/*Animate width to 100%*/
#keyframes grow0 {
from {
width: 10%;
}
to {
width: 100%;
}
}
LINK
I am trying a transition where a line becomes a long rectangle. I want to make it so that when the transition finishes, the final state remains in place even when the mouse is not hovered on it.
This is my current code:
#line {
width: 300px;
height: 1px;
background-color: darkblue;
transition: height 2s;
-webkit-transition: height 2s;
}
#line:hover {
width: 300px;
height: 200px;
background-color: darkblue;
}
<div id="line"></div>
I think the best solution is to add a small script that adds a class. The class remains after unhovering:
window.addEventListener('DOMContentLoaded', function() {
document.getElementById('line').addEventListener('mouseover', function(event) {
document.getElementById('line').classList.add('activated');
});
});
#line {
width: 300px;
height: 1px;
background-color: darkblue;
transition: height 2s;
-webkit-transition: height 2s;
}
#line.activated{
width: 300px;
height: 200px;
background-color: darkblue;
}
<body>
<div id="line"></div>
</body>
A tricky way to get this effect only with CSS: set the transition-delay on the element to a huge value. and set it to 0 on the hover state
When you hover, the element changes to the hover state, and this way the transition is immediate.
When you un-hover, there will a 9999s delay before it begins (well, not really for ever, but nobody will notice)
#line {
width: 300px;
height: 10px;
background-color: darkblue;
-webkit-transition: height 1s 9999s;
transition: height 1s 9999s;
}
#line:hover{
width: 300px;
height: 200px;
background-color: darkblue;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<body>
<div id="line"></div>
</body>
I'm using the following CSS code on my linked images:
a img:hover {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
background: #f00;
}
The idea is that when a user hovers over an image, this will be slightly tinted with red. The browser though seems to ignore the "background: #f00;" property.
What am I doing wrong?
Thanks in advance
It won't work as you are having image, so you need to have an overlay element, probably a div
Demo
HTML
<div class="wrap">
<img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay"></div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
}
.wrap:hover .overlay {
background: rgba(250, 0, 0, .1);
}
Note: You should have a positioned relative container, else your absolute positioned div will run out in the wild, moreover, you can remove display: inline-block; and provide respective height and width to the container element, see to it that it sticks to your image, alternatively you can also use transitions for smooth effect
For transition you need to modify the class like this
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
Demo Transition