I m trying to make a simple hover effect with some images in an html website.
The plan is : When you hover over an image , the image shades and some details appear.
The css code is this.
/* Hover overs */
.folio4:hover .face {
opacity:1;
cursor: pointer;
}
.folio4:hover img {
opacity: 1;
}
.folio4:hover h2 {
opacity: 1;
}
.folio4:hover a.icon {
opacity:1;
transform: translateY(75px);
-webkit-transform: translateY(75px);
-o-transform: translateY(75px);
-ms-transform: translateY(75px);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-ms-transition: 500ms;
}
.folio4:hover a.icon2 {
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-ms-transition: 500ms;
transform: translateY(75px);
-webkit-transform: translateY(75px);
-o-transform: translateY(75px);
-ms-transform: translateY(75px);
opacity: 1;
}
It works on all browsers except mobile Safari. What can I do for this to work?
Thanks in advance for every answer.
As far as I know it, the hover effect can not work with mobile devices, due to the fact that the system does not see the hover effect, as you know it from your computer.
The only thing you can do is, is to set that hover effect as a on click effect only for the responsive design of your page, so the user has to tap on a picture and gets the details then.
Sorry if this is not the solution
Related
I made a css that can rotate my image when someone hover it
But I would rotate this image every 10 seconds too
.smiley-construct {
width: 64px;
padding: 0;
}
.smiley-construct img {
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
.smiley-construct img:hover {
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
transform: rotate(540deg);
-webkit-transform: rotate(540deg);
-moz-transform: rotate(540deg);
-o-transform: rotate(540deg);
-ms-transform: rotate(540deg);
}
<div class="smiley-construct">
<img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png">
</div>
Can I change that to rotate my image every 10 seconds
but and keep the hover rotate too ?
Thanks
You can create a keyframe in css, something like this:
#keyframes rotating {
0% {
transform: rotate(0deg);
}
93% {
transform: rotate(0deg);
}
100% {
transform: rotate(540deg);
}
.smiley-construct img {
animation: rotating 10s infinite;
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
We can have two CSS animations - one which rotates the face then waits for the best part of 10s and keeps doing that and the other which kicks in on hover and just spins once.
I am not absolutely sure of the effect you want - is the face to go upside down after each rotate? You may want to play around with animation-fill-mode if not.
Here is a snippet:
.smiley-construct {
width: 64px;
padding: 0;
}
.smiley-construct img {
animation-name: spinwait;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.smiley-construct img:hover {
animation-name: spin;
animation-duration: 0.7s;
animation-iteration-count: 1;
}
#keyframes spinwait {
0% {
transform: rotate(0deg);
}
7% {
transform: rotate(540deg);
}
7.1% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(540deg);
}
}
<div class="smiley-construct">
<img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png">
</div>
You can make a function in javascript and make something like this:
Or make it jquery on when your page loads, but without knowing the structure and the resources available, I can not decide for you.
var elemPicture = document.getElementById("PictureId");
elemPicture.style.transition = "all 0.5s";
elemPicture.style.transform = "rotate(15deg)";
Better yet, use keyframes. No need to add extra JS if you can use CSS.
There's a pretty good explanation of how to do this here.
I have a modal window which I wrote in ReactJS.I need to realize Fade in Scale effect to this modal window.Something like this (Please look to effect with name Fade in & Scale).
I found a library which realize that effect rodal (Please look to effect with name Zoom) but not in React way ,dynamically removing element from DOM.
So I wrote it from scratch.But I have a problem.When modal fade out scale animation work's but when it fade in it not work's.
Please help.
Codesandbox
My styled component style.
&.fade-in {
opacity: 1;
/* transition: opacity linear 0.15s; */
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: all 0.3s;
}
&.fade-out {
opacity: 0;
transition: opacity linear 0.15s;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
you need to add scale to modal in order to achieve this
Check the sandbok link
you need to add a transform: scale(0); to the main div, this will solve your issues.
I've been trying to use a transition-delay when moving from "state A" to "state B" but not having that delay when moving back to state A. This is a general question though about whether the CSS spec says that the settings for a transition should be those when the transition starts or those from the state which is being transitioned to. Here is an example:
.menu {
transform: translateX(0%);
transition: transform 1s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 5s ease-out;
}
Should the opening animation animation take 1 second or 5 seconds?
My code is slightly more complicated as it uses a delay, but basically it boils down to this.
.menu {
transform: translateX(0%);
transition: transform 0.5s ease-out 0;
}
.menu.is-open {
transform: translateX(100%);
transition: transform 0.5s ease-out 0.5s;
}
When I try this in Chrome or Firefox I get a delay when opening the menu and no delay when closing the menu, but in IE11/Edge it behaves as it would without the delay set. So I'm not sure whether this is a browser bug, or whether I've misunderstood how transitions work, hence my more general question about which transitions are used.
It should be transition: transform and not transition: translate
The transition rule accepts CSS properties not values
Try reversing the order so that the .menu gets the half second delay
.menu{
transform: translateX(0%);
transition: transform 0.5s 0.5s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 0.5s 0s ease-out;
}
As for not working in IE, see vendor prefixes for transition and transform
Seems like you understood correctly how transition works. See my code snippet:
JSFiddle
.hoverable {
height: 50px;
background-color: yellow;
}
.moving {
width: 100px;
height: 100px;
background-color: red;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: transform 1s linear 0s;
transition: -ms-transform 1s linear 0s;
transition: transform 1s linear 0s;
}
.hoverable:hover + .moving {
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
-webkit-transition: transform 0.5s linear 0.5s;
transition: -ms-transform 0.5s linear 0.5s;
transition: transform 0.5s linear 0.5s;
}
<div class="hoverable">Hover me</div>
<div class="moving">I can move</div>
Maybe transition-timing-function: ease-out seems like delay for you in some cases, so I used transition-timing-function: linear in my example to show the transition with a constant speed.
The red block moves from 0% to 200% for 0.5s with 0.5s delay. And moves from 200% to 0% for 1s without delay. There is no any magic with how transition works.
I have a link containing a sprite image, with a CSS animation on mouse hover.
a {
display:inline-block;
width:48px;
height:48px;
overflow:hidden;
}
a img {
-webkit-transition: 250ms ease-out;
-moz-transition: 250ms ease-out;
-o-transition: 250ms ease-out;
transition: 250ms ease-out;
}
a:hover img{
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}
Animation works fine, but when I click the link, it remains on hover state.
Here's a fiddle showing the problem. When you click the link, a new tab is opened as expected. But when you come back to the fiddle, the sprite is still in hover state. How can I bring it back to normal (not-hover) state? I've tried to trigger mouseleave event with jQuery, but it failed.
The event is fired correctly but the CSS still sees it as ':hover' state (and I don't think you can change that with javascript). Therefore you could change your css from
a:hover img {
to
a.hovered img {
thus setting it as a class on its own and not a css state. Then in your JS you can leave the click handler as before (even though I used 'mouseout' but it shouldn't matter) and add a hover() handler like
$('a').click(function() {
$(this).trigger('mouseout');
});
$('a').hover(function() {
$(this).addClass('hovered');
}, function(){
$(this).removeClass('hovered');
});
Customize hover behavior with jQuery instead of CSS :hover pseudo class:
<a id='theLink' href="http://www.facebook.com" target="_blank"><img src="http://bradsknutson.com/wp-content/uploads/2013/05/facebook-hover.png" alt="Facebook"/></a>
a {
display:inline-block;
width:48px;
height:48px;
overflow:hidden;
}
a img {
-webkit-transition: 250ms ease-out;
-moz-transition: 250ms ease-out;
-o-transition: 250ms ease-out;
transition: 250ms ease-out;
}
.hover{
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}
$('#theLink').mouseenter(function(){
$(this).children().first().addClass('hover');
}).mouseleave(function(){
$(this).children().first().removeClass('hover');
}).click(function(){
$(this).children().first().removeClass('hover');
});
See it in action: http://jsfiddle.net/gssw0dm6/
So, this is my CSS:
img.buttonImg {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
img.buttonImg:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Yet no animation seems to happen, the image isn't rotating at all on FireFox, but on other browsers it does.
Here is your problem - demonstrated by this example.
The transition doesn't work when hovering over the img element because of the fact that it is within a button element. I assume this is a rendering issue, as this only seems to be the case for FF. It works fine in Chrome and other modern browsers.
As for a solution, removing the img element from the button will obviously solve the problem.
Alternatively, you could add the rotation transition effect when hovering over the button as opposed to the child img element. Updated example - it works in FF.
button.t:hover img {
transform: rotate(360deg);
/* other vendors.. */
}
Both solutions work; however, I don't even know if it is valid to have an img element within a button element. This is probably the reason for the rendering bug; if it even is a bug.