In my scenario, i have try many combinations, but i'm not able to figure out why the transition not work on mouse out. Hope in your helps... Thanks!
CSS:
.wrap_img {
position: relative;
width: 300px;
height: 200px;
background: #555;
}
.play-icon-hover {
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.play-icon-hover i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
color: #fff;
opacity: 0.7;
font-size: 90px;
}
.wrap_img:hover .play-icon-hover {
visibility: visible;
opacity: 1;
cursor: pointer;
z-index: 1;
}
HTML:
<div class="wrap_img">
<a href="" title="">
<div class="play-icon-hover">
<i class="fa fa-play-circle"></i>
</div>
</a>
</div>
DEMO: https://jsfiddle.net/L41kgye3/10/
The reason your transition is not working on mouseout is that you have used opacity 0.5s ease-in-out in your css whereas you have also used visibility: hidden on your css selector .play-icon-hover. So you need to use transition: all 0.5s ease-in-out. Try this code.
.play-icon-hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s ease-in-out;
}
Change to this:
transition: all 0.5s ease-in-out;
Related
I have an absolutely positioned image inside a relatively positioned container.
Height of image is bigger than that of the container.
I want the image to scroll up to its end using only CSS.
The catch is that height of the image could vary, so it makes sense to make sure that bottom of the image is aligned with bottom of the container once hovered.
Following is the code:
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
bottom: 0;
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
Try transition on transform
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: transform 1s ease;
}
img:hover {
transform: translateY(-60%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
EDIT:
As the height is not set, I'd suggest a jQuery/js solution
$("img")
.mouseover(function() {
var offset = -$(this).height() + 200;
$(this).css("top", offset);
})
.mouseleave(function() {
$(this).css("top", 0);
});
body {
display: flex;
justify-content: space-around;
}
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: top 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Vertical-Banner-EN.jpg">
</div>
You need a way to position the element equivalent to bottom: 0px, but taken for the reference the top .
If you set top: 100%, the top of the element will be at the bottom of the parent.
Then, set a transform of 100%, and the bottom will be where the top was.
Notice that this solution works for any image and container height.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0%;
transform: translateY(0%);
transition: all 1s ease;
}
img:hover {
top: 100%;
transform: translateY(-100%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
You can have a transition between bottom: 0 and bottom: calc(100% - 18px), which is the height of the container minus the height of box2.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
}
.box2 {
position: absolute;
height: 18px;
bottom: calc(100% - 18px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.box:hover .box2 {
background-color: green;
bottom: 0;
}
<div class="box">
<div class="box2">
test
</div>
</div>
You can use this, try this with working snippet,
.box{
position:relative;
display:block;
height:200px;
width:200px;
background-color:red;
transition: all 1s ease;
}
.box2{
position: absolute;
transition: all 1s ease;
}
.box:hover .box2{
background-color:green;
margin-top: 180px;
}
<div class="box">
<div class="box2">
test
</div>
</div>
Alright, so, I'm still fairly new to CSS and HTML and have run into another problem. I couldn't seem to find my question already answered on here, but I hope to be redirected if someone finds out it has been asked and answered. Anyway, I'm using flex-box and attempting to horizontally align these three boxes within a wrapping div element. The three boxes themselves are relatively positioned, with a single absolutely positioned rectangle within each. So a div, surrounding three div boxes, surrounding a single rectangular div each.
image example
I've managed to horizontally align them, but I've found an issue. The rectangular divs inside the three boxes are set up to "pull" out from the side of the boxes and form a band across with a tooltip over the front. I haven't even started work on the third box yet, because only the first box works how it's supposed to. The second box, for some reason, isn't functioning, and the absolute positioning of its band seems to be latching onto the header. So instead of pulling out from the side of its box, it is pulling out from the top side of the screen.
image example
When I delete the first box, the second box works fabulously. But both of them together, the first works, and the second blunders. Wrapping the faulty box in a second div prevents the problem. Also, borders don't show when I try to see where the apparently non-functioning div is, and letters typed within the div's HTML appear outside the image of the box. There is also a tiny dot below the element, or sometimes appearing beside it, that triggers the tooltip when hovered over.
What could possibly be the error? Are the two boxes somehow interacting and slipping each other up? Have I missed something? Help, please!
#bodyWrap {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
/* (1st) thumbnail begin */
.icon01 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon01 img {
border: 1px solid #000000;
}
.expThumb {
position: relative;
top: 0;
opacity: 0;
visibility: hidden;
z-index: 3;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.tooltip {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon01:hover .tooltip {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon01:hover .band {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon01:click .expThumb
/* (1st) thumbnail end */
/* (2nd) thumbnail begin */
.icon02 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon02 img {
border: 1px solid #000000;
}
/* insert expanded image here
. {
position:absolute;
top:0;
opacity:0;
visibility:hidden;
z-index:6;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
*/
.tooltip2 {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 5;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band2 {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 4;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon02:hover .tooltip2 {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon02:hover .band2 {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon02:click .expThumb2
/* (2nd) thumbnail end */
<div id="bodyWrap">
<div class="icon01">
<a href="#info">
<img src="img/thumb.jpg" alt="box">
<img class="expThumb" src="img/thumb2.png">
<h2 class="tooltip">aTip</h2>
<div class="band"></div>
</a>
</div>
<div class="icon02">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip2">aTip</h2>
<div class="band2"></div>
</a>
</div>
<div class="icon03">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip3">aTip</h2>
<div class="band3"></div>
</a>
</div>
<div id="info" class="active">
<p>blahlbahlbahlbhalbhalbhalbhalbhalbhalbhalbhalah</p>
</div>
</div>
only .icon01 is position: relative;. The other parents, .icon02, .icon03 are statically positioned.
You can make those divs relative with the child combinator selector, or you could give them all a common class and target them that way, or you could just do .icon01, .icon02, .icon03 { position: relative; }. I'm using the child combinator selector here.
#bodyWrap > div {
position: relative;
}
#bodyWrap {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
/* (1st) thumbnail begin */
.icon01 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon01 img {
border: 1px solid #000000;
}
.expThumb {
position: relative;
top: 0;
opacity: 0;
visibility: hidden;
z-index: 3;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.tooltip {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon01:hover .tooltip {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon01:hover .band {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon01:click .expThumb
/* (1st) thumbnail end */
/* (2nd) thumbnail begin */
.icon02 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon02 img {
border: 1px solid #000000;
}
/* insert expanded image here
. {
position:absolute;
top:0;
opacity:0;
visibility:hidden;
z-index:6;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
*/
.tooltip2 {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 5;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band2 {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 4;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon02:hover .tooltip2 {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon02:hover .band2 {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon02:click .expThumb2
/* (2nd) thumbnail end */
<div id="bodyWrap">
<div class="icon01">
<a href="#info">
<img src="img/thumb.jpg" alt="box">
<img class="expThumb" src="img/thumb2.png">
<h2 class="tooltip">aTip</h2>
<div class="band"></div>
</a>
</div>
<div class="icon02">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip2">aTip</h2>
<div class="band2"></div>
</a>
</div>
<div class="icon03">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip3">aTip</h2>
<div class="band3"></div>
</a>
</div>
<div id="info" class="active">
<p>blahlbahlbahlbhalbhalbhalbhalbhalbhalbhalbhalah</p>
</div>
</div>
I've consulted these similar questions, 1, 2, 3, 4, but couldn't find the solution to my problem.
I have a simple play button and semi-transparent div transition when hovering over a block-level link which is placed over an image.
The problem is that the divs jitter when moving the mouse vertically over the image.
There are two exceptions to this behavior (in which case, the transition and div behavior run smoothly):
Moving the cursor vertically and parallel to
<span class="play">
and moving the mouse horizontally across the div.
/*------- Media Play Button -------*/
.vThumb {
position: relative;
width: 100%;
height: auto;
font-size: 0;
}
.vThumb img {
position: relative;
width: 100%;
display: block;
z-index: -1;
opacity: .5;
}
.vThumb a {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
opacity: 0;
}
.vThumb a:hover .play {
position: relative;
font-size: 14vw;
color: #f00;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
opacity: .95;
border: none;
display: block;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #f00;
opacity: .3;
z-index: 1000;
display: inline-block;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
/*------- End Media Play Button -------*/
<div class="vThumb">
<a href="#">
<span class="play">►</span>
</a>
<div class="vOverlay">
</div>
<img src="http://i.imgur.com/wZzgmVt.jpg">
</div>
Unlike the similar questions mentioned above nothing here is changing size and the issue occurs across all browsers. What am I doing wrong?
The reason you're seeing the flickering is because of the selector .vThumb a:hover ~ .vOverlay.
You are only applying styling to the .vOverlay element when hovering over the previous a element. When the .vOverlay element appears, it is positioned over the a element (which means that you are no longer hovering over the a element), resulting in it disappearing and repeating again.
You can easily prevent this by applying the styling when hovering over .vOverlay as well (rather than only applying it when hovering over the a element).
In other words, you want the following:
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
/* ... */
}
However, that will result in the play button not being visible (since you are no longer hovering over the a element either).
You can resolve this by changing the selector .vThumb a:hover .play to .vThumb:hover .play.
Updated Example:
.vThumb {
position: relative;
width: 100%;
height: auto;
font-size: 0;
}
.vThumb img {
position: relative;
width: 100%;
display: block;
z-index: -1;
opacity: .5;
}
.vThumb a {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
opacity: 0;
}
.vThumb:hover .play {
position: relative;
font-size: 14vw;
color: #f00;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
opacity: .95;
border: none;
display: block;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #f00;
opacity: .3;
z-index: 1000;
display: inline-block;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
<div class="vThumb">
<a href="#">
<span class="play">►</span>
</a>
<div class="vOverlay"></div>
<img src="http://i.imgur.com/wZzgmVt.jpg">
</div>
I have images and a text that is displayed in the center of the image when somebody is hovering over the image.
HTML looks like this:
<article>
<div class="entry-content">
<a href="http://www.linktopost.com">
<h3 class="entry-title">Ring #1</h3>
<img width="620" height="387" src="http://i.telegraph.co.uk/multimedia/archive/02725/scotch-whisky_2725818b.jpg" class="aligncenter" alt="Platzhalter_3">
</a>
</div>
</article>
CSS:
article {
float:left;
width:30%;
display:block;
}
.entry-content {
width: 620px;
margin: 0 auto;
position: relative;
height: 387px;
}
.entry-content:hover .entry-title {
color: #000;
display: table-cell;
background-color: #fff;
opacity: 0.75;
}
.entry-title {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
line-height: 387px;
text-align: center;
display: none;
}
article img {
position:absolute;
}
You can see it here:
http://codepen.io/anon/pen/rOXOez
Is there any chance to not use fixed pixel values in the CSS - so that the hover effect is valid and working for any picture? In this example I had to use the width and height of the picture in the CSS to achieve what I wanted.
Thank you!
Solution 1:
Relative/Absolute positioning and center with transform: translate()
https://jsfiddle.net/94efk8kz/
article {
position: relative;
}
.hover-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: black;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hover-content h3 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Solution 2:
Flexbox
https://jsfiddle.net/94efk8kz/1/
article {
position: relative;
}
img {
width: 100%;
}
.hover-content {
width: 100%;
height: 100%;
top: 0;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
background: white;
color: black;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Solution 3
CSS Tables
https://jsfiddle.net/94efk8kz/2/
.entry-content a {
float: left;
width:30%;
position: relative;
height: 100%;
}
.hover-content {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: white;
color: black;
opacity: 0;
bottom: 0;
right: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.v-align {
display: table;
height: 100%;
margin: 0 auto;
}
.hover-content h3 {
display: table-cell;
vertical-align: middle;
}
Try with these changes
.entry-content {
width: initial;
}
.entry-content:hover .entry-title {
margin: 0;
}
.article img {
display: block;
/* position: absolute; remove this,avoid using positon absolute where you can */
width: 100%;
}
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