I have an image positioned within a div. When you hover over the div, it displays a caption over the top. The caption div has a background colour that I'd like to fade in. Is this possible? I've tried applying a transition, but it doesn't seem to work for block elements.
Here's the JSFiddle and code:
HTML
<div class="box">
<img src="http://bit.ly/1G1Pcbz" alt="coding">
<div class="overlay">
This is my caption overlay.
</div>
</div>
CSS
img {
height: auto;
max-width: 100%;
}
.box {
position: relative;
display: block;
width: 200px;
height: 117px;
background: #ccc;
transition: all 0.5s ease-in-out;
}
.overlay {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: red;
z-index: 9999;
}
.box:hover .overlay {
display: block;
}
Move the transition property from .box to .overlay, and animate opacity instead of display:
.overlay {
transition: all 0.5s ease-in-out;
opacity: 0;
}
.box:hover .overlay {
opacity: 1;
}
Fiddle
I have found the jQuery function .fadeIn() to be easy to use. Documentation can be found here:
http://api.jquery.com/fadein/
Related
I am trying to add a sweep to the right animation on my image so that when you hover the image it sweeps to the right and it shows the text on hover as well. I got this to work just find with buttons but I am lost on how to go about doing this. This is what I have so far with my code:
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>
I made some changes to your CSS to make it work smooth and without insane jumping when you hover left side of the image. Here is the CSS and below is the description what changes and why I have made.
.portfolio-box {
position: relative;
overflow: hidden;
display: inline-block;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
transition: all 0.5s ease-out;
display: block;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: all 0.5s ease-out;
}
.portfolio-box:hover .portfolio-mask {
transform: scaleX(1);
opacity: .85;
color: white;
}
Changes I made:
Added display: inline-block; for .portfolio-box - to make it be as big as image inside.
Added display: block; for image to prevent 2-3px empty space under image when it is displayed inline (default).
Added transition: all 0.5s ease-out; for image, to prevent jumping when change position.
I changed transition from transform to all to animate not only move but opacity of mask container.
Animation are now added for hover on .portfolio-box, because it is static container, which is very important for effect you want to achieve - if you add animation on image hover then you will get infinite animation, because when you hover your mouse above image then it will slide to the right and after then it will be no longer hovered so it will go back to initial state and then it will be hovered again so it will go to the right... repeat initity ;)
I think from your description that what you are trying to do is a transform. For this, just add a translateX transform (of your desired size) to the css.
Hope this helps.
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-box img.animate:hover{
transform: translateX(5em);
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img class="animate" src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>
Since I am a beginner, I am really struggling with this.
Can you tell me how I can transition the position of the .box when hovering?
I could only display it, but I couldn't transition the position from bottom to top which is what I want to do.
.more {
position: relative;
height: 100px;
}
.box {
display: none;
position: absolute;
background: white;
border-radius: 4px;
height: 43px;
width: 169px;
top: 50px;
transition: top 5s;
}
.more:hover .box {
top: 100px;
display: block;
}
<div class="col-sm-1 more">
More
<div class="box">
<span>Pages</span>
</div>
</div>
Try visibility instead of display. Visibility works a bit better with transitions.
.more {
position: relative;
height: 100px;
}
.box {
position: absolute;
background: white;
border-radius: 4px;
height: 43px;
width: 169px;
top: 50px;
transition: top 5s ease;
visibility: hidden;
}
.more:hover .box {
top: 100px;
display: block;
opacity: 1;
visibility: visible;
}
<div class="col-sm-1 more">
More
<div class="box">
<span>Pages</span>
</div>
</div>
Transition works by interpolating between the old value and then new value. The issue that you're seeing here is technically the old value was never applied in the first place.
Setting .box to display: none was basically saying, "don't render this at all," and transition can't transition between something that doens't exist and another value. Using visibility instead of display fixes the issue since visibility: hidden only hides the element, not removing it completely.
.more {
position: relative;
height: 100px;
}
.box {
visibility: hidden;
position: absolute;
background: white;
border-radius: 4px;
height: 43px;
width: 169px;
top: 50px;
transition: top 5s;
}
.more:hover .box {
top: 100px;
visibility: visible;
}
<div class="col-sm-1 more">
More
<div class="box">
<span>Pages</span>
</div>
</div>
If you want the transition to work in reverse, then you can add another transition delaying the visibility.
Try this :
you can easily change the margin in the box class if you want and the speed in the transition :)
.box {
position:absolute;
top:0;
margin-top:400px;
}
.more:hover .box {
margin-top:0;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
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.
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. :)
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/