I’m trying to achieve some nice transition effects when hovering after a image.(a hover div to appear from the same direction as the mouse ).
Everything works fine except that the “hover in” transition is not in straight line but more like in a diagonal & fill kind of way.(in the example below the transition is from left: -378px; to left : 0px / top is 0).
Normal state:
<div class="hover_effect initial_hover slideFromLeft" style="display: block;">link aici</div>
Hover state (classes are removed and added via jQuery):
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
I want the movement to be in a straight line like the hover out transition which works fine. Can you point me the bug ?
This is the html & css code:
<div class="portfolio-sample regular-portfolio coding-2 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px);">
<img width="455" height="295" src="http://localhost/wp-content/uploads/2013/01/env0251-455x295.jpg" class="attachment-portfolio-two wp-post-image" alt="env025">
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
<div class="custom_slider_shadow"></div>
</div>
Thank you!
.hover_effect{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.initial_hover{
position: absolute;
background: rgba(75,75,75,0.7);
width: 378px;
height: 245px;
top: 260px;
}
.slideFromLeft {
top: 0px;
left: -378px;
}
.slideLeft {
left: 0px;
}
Answer :
OK i figure it out - it was because the initial_hover class was added after the slideFromLeft on hover. Once i reverse these it works as i expected
It is not linear because it is specified to be not linear. If you want a linear transition, you should change both ease-in-out and ease to linear in the styling for .hover_effect.
Related
I have an album cover that also has a play button on top of it.
When a user hovers over the album cover, the opacity changes to lighten the image. Likewise, when hovering over the cover, if the user then hovers over the play button, the cover opacity should remain in it's changed state.
The problem is that because I have a transition effect on the opacity, the opacity flickers when hovering back and forth over the cover and the play button.
I created a fiddle to show the issue.
How can I have it so that when initially hovering over the album cover, the opacity transitions, but then hovering over the play button, the opacity simply stays the same without re-transitioning, causing it to flicker?
.play-button-container img:hover,
.play-button:hover + .image {
opacity: .6;
}
.play-button-container img {
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.play-button {
position: absolute;
top: 10%;
left: 10%;
font-size: 30px;
color: #fff;
z-index: 1000;
background-color: red;
}
<div class="image-container">
<div class="play-button-container">
<div class="play-button">
PLAY
</div>
<div class="image">
<img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">
</div>
</div>
</div>
https://jsfiddle.net/659z2ndx/1/
When you hover over the play button, you change the opacity of the div with the class image. That is what causes the flicker.
What you should do is change the opacity of the img
.play-button-container img:hover,
.play-button:hover + .image > img {
opacity: .6;
}
.play-button-container img {
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.play-button {
position: absolute;
top: 10%;
left: 10%;
font-size: 30px;
color: #fff;
z-index: 1000;
background-color: red;
}
<div class="image-container">
<div class="play-button-container">
<div class="play-button">
PLAY
</div>
<div class="image">
<img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">
</div>
</div>
</div>
.ez-active
&.ez-fixed-top-right
position: fixed
right: 0
top: 0
transition: top 500ms ease-in-out 0s, right 500ms ease-in-out 0s
I want it to slide into the top right when it's clicked.. but for some reason it just teleports.
Update: your code seems to be fully functional. Remember that the transition should be set on the default state of your element, not on the 'active' state.
$(".clickable").click(function() {
$(this).toggleClass("ez-active");
})
.ez-fixed-top-right {
position: fixed;
right: 100px;
top: 100px;
transition: top 500ms ease-in-out 0s, right 500ms ease-in-out 0s;
}
.ez-active .ez-fixed-top-right {
position: fixed;
right: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickable">
<div class="ez-fixed-top-right">
test
</div>
</div>
Edit: Turns out I'm wrong about the extra seconds. I'm leaving this here for now in case you are reading it, since the sample is functional. But we're going to need more of your code to figure out why it isn't working.
I am experiencing an issue with CSS3 scaling and Safari (v10.0.1).
I have a selection of grid items with the following structure:
<div class="grid-inline col-12 bp1-col-6 bp3-col-3 index-grid-selector index">
<a href="">
<div class="index-grid-item">
<div class="index-grid-dummy"></div>
<img srcset=", 2x" title="" alt="">
</div>
</a>
</div>
CSS (LESS):
.index-grid-selector {
a {
.index-grid-item {
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
.index-grid-dummy {
padding-bottom: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
&:hover {
.index-grid-item {
img {
transform: scale(1.2);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
}
The image is positioned absolutely within the grid item container and then scaled on hover.
During the image scaling in Safari, the image enlarges slightly and appears to shift. Gaps (white lines) appear around the image. Once the animation is complete, the image sits correctly, until the hover function is removed.
I have set up a working demo here to showcase the issue.
http://www.testdomainone.co.uk/test.html
I have tried applying the folowing to the image and its parent, but the issue still occurs.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
-webkit-transform: translateZ(0)
Does anyone know how this can be fixed?
This does not solve your specific issue using an img tag, though since you use fixed size for your images, why not use background-image
Updated with image-set to achieve the equivalent for background images as srcset does for img ... and since it is more or less only iOS Retina which use that high resolution, it will be a decent fallback for browser not supporting it
.index-grid-item {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
.index-grid-dummy {
padding-bottom: 100%;
background-size: 100%;
transition: transform 0.25s ease-in-out;
}
.index-grid-item:hover > div {
transform: scale(1.2);
transition: transform 0.25s ease-in-out;
}
<div class="index-grid-item">
<div class="index-grid-dummy" style="background-image: -webkit-image-set( url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg) 1x, url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large_2x.jpg) 2x );
background-image: url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg)"></div>
</div>
Side note, in above sample I use inline style to set the image source in the markup, as one does with the img tag, and of course this could be set in the CSS as well
.posts .img-hover:before {
content: '';
display: block;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px;
/* image width */
height: 220px;
/* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 1;
}
<div class="posts">
<a href="#">
<h2 class="postname">
Travel Flashback #1 </h2>
</a>
<a class="img-hover" href="#">
<img width="960" height="720" src="http://.." class="img-hover" alt="" />
</a>
</div>
I have one problem with this code. As you see I want transition over pseudo element ::before, which has bkg img.
When I hover on, transition works smoothly, but when I leave mouse, bkg img goes away immediately without transition.
Can you please suggest something?
On the hover you probably only want the css related to the transition, not the actual styles for the pseudo element. Try this
.posts .img-hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px; /* image width */
height: 220px; /* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
opacity: 1;
}
For others browsing through this forum, I came to this thread with exact same problem, I tried to switch transition focus from
opacity 0.35s ease-in-out
to:
all 0.35s ease-in-out
and issue was resolved.
My browser is Chromium version 80.0.3987.162, Debian Linux 10.4
My issue was actually that the transition did not work at all. The element appears and disappears instantly. For those with a similar problem and came here, I believe CSS ignores the on-hover transition for an empty element even if the content will be added on hover and the reason it doesn't transition when you hover off is because the content is removed immediately.
Instead of
elem:before{
opacity:0;
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
content:'something';
}
move content to elem:before
elem:before{
opacity:0;
content:'something';
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
}
If you want the content only on hover but you want to transition another property (like width) and opacity can't be used, content: ''; should work on hover but remember to keep the property even when you hover off.
To answer OP's question and why the solution by ynter works it's because the background disappears once they hover off. Keep the background in the :before element.
Is it possible to change the color of an image using only CSS?
(I'm using the transparent backgrounded glyphicons, and I need different symbol [not background] colors for my theme)
You can use image tints, but I don't know if it's going to give you the effect you expect:
Basically you wrap a <figure> element around your <img/> and apply styling to it:
/*HTML*/
<figure class="tint">
<img src="icon.png" width="400" height="260">
</figure>
/*CSS*/
.tint {
position: relative;
float: left;
cursor: pointer;
}
.tint:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,255,255, 0.5);
-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
}
.tint:hover:before {
background: none;
}
Check the link for a demo and full code samples.
On this website you can also check out some different methods.
No. As these are image icons you can not change their color. You can try using these http://www.entypo.com/. As these are fonts they can easily change colors.