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>
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*/
}
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'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>
I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:
<div class="textbox">
<p class="boxtext">This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.</p>
</div>
And also
div.textbox {
background-color: white;
margin-left: 2.5vw;
border: 2px solid lightgray;
width: 15vw;
height: 600px;
float: left;
}
div.textbox:hover {
background-color: lightgray;
border: 2px solid lightgray;
opacity: 0.5;
}
p.boxtext {
margin: 5% 5%;
}
This creates the hover that I want, but I can't keep the text opacity at 100%.
Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?
Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.
a#imglink1 {
background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg');
width: 200px;
height: 200px;
float: left;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
a#imglink1:hover {
background-image: url('../images/apollo_transparent.png');
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
a#imglink1:hover p {
visibility: visible;
}
Since you're using a solid background color you can use rgba to only change the opacity of the background/borders and not affect the content inside. In your example:
div.textbox:hover {
background-color: rgba(222,222,222,.5);
border: 2px solid rgba(222,222,222,.5);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
For images you can accomplish a fade using :before and :after and fading the opacity of those elements:
a#imglink2 {
width: 200px;
height: 200px;
float: left;
position: relative;
}
a#imglink2 p
{
position: relative;
z-index:2;
}
a#imglink2:before
{
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:1;
transition: .3s opacity linear;
}
a#imglink2:after
{
background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:0;
transition: .3s opacity linear;
}
a#imglink2:hover:before
{
opacity:0;
}
a#imglink2:hover:after
{
opacity:1;
}
http://codepen.io/seraphzz/pen/ikJqB
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