Is it possible to add an opacity transition to CSS3 div overlay target?
JSFIDDLE: http://jsfiddle.net/pb7St/
#content {
background-color: #ccc;
height: 300px;
width: 300px;
z-index:1;
}
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease;
}
#overlay {
display:none;
}
#overlay:target {
display:block;
opacity: 1;
}
Is there any other (better) way to close / hide the div? Currently I'm using:
href="#_"
Yes, there is:
JSFiddle Demo
CSS
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease, visibility 1s 0s; /* added visibility transition */
}
#overlay {
//display:none;
visibility:hidden
}
#overlay:target {
//display:block;
visibility:visible;
opacity: 1;
}
EDITED to add transition to visibility with delay for fade-out effect. Personally, I'd go with JQuery. :)
Related
I'm trying to make a button where a text appears before another text only on hover. I achieved that but can't put any delay on it.
See how fast the word "let's" appears. Need to slow that down.
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn:hover::before {
content: "Let's ";
}
<button class="btn">
Go
</button>
I tried to use this answer switching out link text on hover - transition, but it is actually replacing the original text no?
You can make the text present initially and create a transition of width for example:
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn::before {
display:inline-block;
vertical-align:text-bottom;
content: "Let's ";
max-width:0px;
white-space:nowrap;
overflow:hidden;
transition:1s;
}
.btn:hover::before {
max-width:50px;
}
<button class="btn">
Go
</button>
Try to use transition-delay with opacity
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn::before {
opacity: 0;
content: "Let's ";
transition: all .3s linear 0s;
position: absolute;
transform: translateX(-110%);
}
.btn:hover::before {
transition: all .5s linear .3s;
opacity: 1;
}
<button class="btn">Go</button>
you can achieve that by adding a delay to the transition?
.btn {
transition-delay: 2s;
}
I am looking for a solution to create an image hover effect and keeping the image same height as widht at the same time. Here is my code right now:
.kozossegitag {
content: "";
display: block;
width: 100%;
padding-top: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden
}
.reszletek {
width: 100%;
padding-top: 100;
background-color: rgba(67,85,103,0.7);
opacity: 0;
}
.kozossegitag:hover .reszletek {
background-color: rgba(67,85,103,0.5);
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
<div class="kozossegitag">
<div class="reszletek">
<span>Koren Miklós</span>
</div>
</div>
My goal is to cover the whole image with this pastel blue color and place the text right on the image. As you see here (the left one is without hover, the right one is with):
Many thanks for every help!
Cheers,
Pepe
Add this to your css:
.kozossegitag:hover{
background-color: lightblue;
background-blend-mode: multiply;
}
Here is the JSFiddle demo
It's not overly neat, as it's a little rushed but you get the idea. I used position absolute and some pseudo elements to create what I think you're trying to achieve.
CSS:
.kozossegitag {
display: block;
width: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden;
position: relative;
}
/* give the div the ratio height */
.kozossegitag::after {
content: "";
padding-top: 100%;
display: block;
}
.reszletek {
width: 100%;
opacity: 0;
}
.kozossegitag:hover .reszletek {
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
z-index: 10;
position: relative;
}
/* overlay the light blue using ::before */
.kozossegitag:hover::before {
content: "";
background-color: rgba(67, 85, 103, 0.7);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
Working example.
By positioning .kozossegitag relatively, you can position .reszletek absolutely right over top of it by setting width and height to 100% and top and left to 0.
You also forgot to set height to 0 on .kozossegitag to keep it square;
.kozossegitag {
height:0;
position:relative;
content: "";
display: block;
width: 100%;
padding-top: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden
}
.reszletek {
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-color: rgba(67,85,103,0.7);
opacity: 0;
}
.kozossegitag:hover .reszletek {
background-color: rgba(67,85,103,0.5);
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
Fiddle: http://jsfiddle.net/trex005/rpafw24q/
I made this rollover:
jsfiddle.net/DH6Lu/
But as you can see the background image glitches. This is not the case when I don't use the opacity on the main div:
http://jsfiddle.net/6KT9p/
Any idea what is wrong?
<div id="opacity">
<div class="box">
<a class="link" href="#">
<div class="inner">
<img src="http://lorempixel.com/340/192/" width="340" height="192">
<div class="description">
<h3>titel2</h3>
</div>
</div>
</a>
</div>
</div>
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.inner img {
position: absolute;
opacity: 1;
-webkit-transition: opacity 0.5s ease;
}
.inner img:hover {
opacity: 0.15
}
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0 fixed;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
.description h3 {
color: #fff;
font-size: 18px;
text-transform: uppercase;
text-align: center;
position: absolute;
}
#opacity {
opacity: 0.5
}
The problem arises from the fixed property of the background.
Set the CSS to
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
and it will work
fiddle
The problem is also linked to the GPU handling this different from the CPU. The GPU is handling the background during the transtion, the CPU in the static states. If you set transform: translateZ(1px) - one of the usual tricks to enable GPU - the background will be permanently in an offset. It solves the glitch, but the look isn't correct.
I guess it glitches because .inner inherits the opacity from #opacity... but I don't know why. Interesting.
Still, I have a workaround for your case, if you want to keep the initial alpha to 0.5: make the .inner half visible, hide the .description unless it's hovered.
The adjacent sibling selector + is useful to show the description when the image is hovered.
Here's what you have to add (existent properties omitted):
.inner img {
-webkit-transition: opacity 0.5s ease;
opacity:0.5;
}
.inner img:hover{
opacity:0.15;
}
.inner img:hover + .description{
opacity:1;
}
.description {
-webkit-transition: opacity 0.5s ease;
opacity:0;
}
Here's a working demo for this.
I cant understand why child div showed without fadein effect? I need when I hover on div ("black") then div (red) gradually appeared.. How do it?
Fiddle
HTML
<div class="main">
<div class="ok"></div>
</div>
CSS
.main {
width: 200px;
height: 200px;
background: black;
}
.ok {
width: 50px;
height: 50px;
background: red;
display: none;
-webkit-transition: opacity 1s linear;
opacity: 0;
}
.main:hover .ok{
opacity: 1;
display: block;
}
Thanks
You can't apply the transition when changing the display property:
Transitions on the display: property
Just remove the display part, and it will work:
.ok {
width: 50px;
height: 50px;
background: red;
transition: opacity 1s linear;
opacity: 0;
}
.main:hover .ok{
opacity: 1;
}
Fiddle: http://jsfiddle.net/sGxgv/1/
I am using following code to display a hidden div on hover. I'm using the CSS transition property for to fade in the hidden div. Is it possible to slide in the hidden (for example from left to right) div instead of fading in using the CSS only?
Here's my code:
HTML
<div class="box">
<img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg">
<div class="hidden"></div>
</div>
CSS
.box{
position: relative;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: 0;
width: 500px;
opacity: 0;
transition: all 1s ease;
}
.box:hover .hidden{
opacity: 1;
}
Demo:
http://jsfiddle.net/u2FKM/
Something like this?
DEMO
And the code I used:
.box{
position: relative;
overflow: hidden;
}
.box:hover .hidden{
left: 0px;
}
.box .hidden {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
I may also add that it's possible to move an elment using transform: translate(); , which in this case could work something like this - DEMO nr2
Just to add my answer, it seems that the transitions need to be based on initial values and final values within the css properties to be able to manage the animation.
Those reworked css classes should provide the expected result :
.box{
position: relative;
top:0px;
left:0px;
width:0px;
}
.box:hover .hidden{
opacity: 1;
width: 500px;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
opacity: 0;
transition: all 1s ease;
}
<div class="box">
<a href="#">
<img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
<div class="hidden"></div>
</div>
http://jsfiddle.net/u2FKM/2199/
I added the vendor prefixes, and changed the animation to all, so you have both opacity and width that are animated.
Is this what you're looking for ? http://jsfiddle.net/u2FKM/3/
transition-property:width;
This should work. you have to have browser dependent code
This may be the good solution for you: change the code like this very little change
.box{
position: relative;
}
.box:hover .hidden{
opacity: 1;
width:500px;
}
.box .hidden{
background: yellow;
height: 334px;
position: absolute;
top: 0;
left: 0;
width: 0;
opacity: 0;
transition: all 1s ease;
}
See demo here