I'd like for the my background image to increase from .1 opacity to .5 opacity when a user hovers over my div.
HTML
<div id="list">
<div class="line_one">om nom nom nom...</div>
<div class="line_two">18 foods to make you incredibly hungry</div>
</div>
CSS
#list {
display:block;
position: relative;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#list::after {
content: "";
background: url('test.jpg');
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
There must be a way to do this without Javascript. Any ideas?
Of course there is.
#list::after {
transition: opacity 1s ease;
}
#list:hover::after {
opacity: 0.5;
}
Related
I'm trying to create a sort of "shooting star" animation on a button underline on hover. I've successfully achieved what I want and it's firing correctly on the first hover, but if you hover over it again the transition is glitchy and doesn't work as intended. The more you hover over it the less the width changes to the point where it no longer works.
I wondered if someone might be able to explain why this is happening?
Here is a JSFiddle
.btn {
position: relative;
font-size: 40px;
}
.btn::before {
content: '';
height: 1px;
width: 100%;
background-color: red;
position: absolute;
bottom: -1px;
right: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.btn::after {
content: '';
height: 1px;
width: 0;
background-color: blue;
position: absolute;
bottom: -1px;
left: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.btn:hover::before {
width: 0;
}
.btn:hover::after {
width: 100%;
}
<a class="btn">Button</a>
With the help of #somethinghere, I was able to resolve this myself. For anyone who might need this in the future, the reverse animation was too slow so was incomplete before hovering over the element again. Adding a transition of 0 for the reverse animation solved the problem.
jsFiddle
.btn {
position: relative;
font-size: 40px;
}
.btn::before {
content: '';
height: 1px;
width: 100%;
background-color: red;
position: absolute;
bottom: -1px;
right: 0;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.btn::after {
content: '';
height: 1px;
width: 0;
background-color: red;
position: absolute;
bottom: -1px;
left: 0;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s linear;
}
.btn:hover::before {
width: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s linear;
}
.btn:hover::after {
width: 100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s linear;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<a class="btn">Button</a>
.tidings {
width: 30%;
float: left;
margin: 0 3%;
}
.tidingsimg:before{
content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
position: relative;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:after{
content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
position:absolute;
top: 0;margin-top: 10px;
opacity:0;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:hover:after{
opacity:1;
}
.tidingsimg:hover:before{
opacity:0;
}
<div class="tidings"></div>
I have an image that I am trying to have smoothly transition into another image using content: url. It works in changing the images abruptly, however I cannot figure out how to apply the transition to actually make it smoothly transition from one image to another. Is it possible to do this using content?
Here is a JSFiddle showing what I have going on.
You Should use Before after and set opacity and transition on them
In .tidingsimg:after class we add position:absolute and top: 0;margin-top: 10px; Because without it after style will go far below before style
.tidings {
width: 30%;
float: left;
margin: 0 3%;
}
.tidingsimg:before{
content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
position: relative;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:after{
content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
position:absolute;
top: 0;margin-top: 10px;
opacity:0;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:hover:after{
opacity:1;
}
.tidingsimg:hover:before{
opacity:0;
}
<div class="tidings"></div>
I'm trying to change a div opacity depending on having the class active or not.
When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.
Follows my CSS code:
.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}
Thank you
[EDIT]
One of the problems was that I change the css property to "block" and "none". The other was solve by the answer choosen.
When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.
You need to combine the classes like so.
As it was you have .highlight as a child of .active.
.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
.high-light.active {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}
The problem here is not the transition, it's the height 100% which is not taking effect because the parent element (body) is not tall 100%.
$('button').on('click', function(e) {
$("#multicanvasArea").toggleClass('active');
})
.high-light{
position: fixed;
width: 100%;
height: 30px;
top: 0;
background-color: black;
opacity:0;
left: 0;
color: white;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multicanvasArea">
<p class="high-light">Highlight</p>
<p class="">Other text</p>
</div>
<button>Toggle class</button>
Your code was 95% there, just a few tweaks I made seem to do the trick. Here is the new css:
#multicanvasArea .high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
}
Here is a link to a pen with a working example:
http://codepen.io/anon/pen/pEjrJo
this is a working example. The Javascript is only to toggle the class.
.box {
width: 200px;
height: 200px;
background: pink;
opacity: 0;
transition: opacity 3s linear;
&.active {
opacity: 1;
}
}
https://plnkr.co/edit/RZRygZieCUMVWiOVEJR8?p=preview
I have a div that I have positioned: absolute; and left: -250px;. When the open navbar button is clicked I want the item to slide onto page. I'm not sure what I am missing,
.drawer .drawer-content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -280px;
overflow-y: scroll;
-webkit-transition: left 5s ease;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 5s ease;
}
.open > .drawer .drawer-content {
left: 0;
webkit-transition: left 5s ease;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 5s ease;
}
When I click the navbar it opens but it does not slide onto the page.
You also need to apply the transition properties to the .open > .drawer .drawer-content code.
.open > .drawer .drawer-content {
transition-property: left;
transition-duration: 1s;
transition-timing-function: linear;
left: 0;
}
You should consider optimizing your transition code to look more like the following:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
So in your case it'd be:
transition: left 1s linear;
Finally, don't forget to use the browser prefixes:
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 1s linear;
Css should look more like this:
.drawer {
position: relative;
width: 100%;
height: 100%;
}
.drawer .drawer-content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -280px;
transition: all ease-in-out 3s;
-moz-transition: all ease-in-out 3s;
-webkit-transition: all ease-in-out 3s;
}
.open > .drawer .drawer-content {
left: 0;
}
You dont need to set transition to .open ... .drawer-content. It should be only in mail declaration for this element.
Also you dont need overflow-y for .drawer-content. Maybe overflow-x for body is enough?:)
I don't think taht it's proper to use different easing options on one element.
Cheers :).
I followed a tutorial exactly and instead of fading from the Print_tab.png to the Print_tab_hover.png,
it just fades to white. Any way I could fix this (without using javascript)?.
Here is the code i Used:
HTML:
<div id="print"
<img class="bottom" src="images/print_tab_hover.png" />
<img class="top" src="images/print_tab.png" />
</div>
CSS:
#print {
position:relative;
width: 300px;
height: 169px;
margin: 0 auto;
}
#print img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#print img.top:hover {
opacity: 0;
}
This works:
#print {
position:relative;
width: 200px;
height: 120px;
margin: 0 auto;
background-image: url(http://fc06.deviantart.net/images2/i/2004/07/e/7/Firefox_dock_icon.png);
}
#print img {
position: absolute;
left: 0;
width: 200px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#print img.top:hover {
opacity: 0;
}
<div id="print">
<img class="top" src="http://lanscaping-ideas.com/wp-content/uploads/2012/04/Landscape-Paintings-2.jpg" />
</div>
Just set a default background for the #print and fade over the new image, or vise versa.