I have applied -webkit-transform:rotateY(180deg); to flip an image. I am applying -webkit-transform:rotateY(0deg); to rotate it back to original position. Now I have some other classes to be applied, but when I check in Chrome Inspect Element I can see that rotateY(0) is still there which should be completely removed.
How can I remove the animation completely from an Element?
.transition
{
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.notransition {
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
just do this:
.transition {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.notransition {
-webkit-transform: none;
transform: none;
}
none seems to be the default value
.transition {
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.notransition {
-webkit-transform:unset;
transform:unset;
}
In my case i needed a way to override an inline transform that was being setted by third party component and i didn't want it to remove it manually.
According to Mozilla documentation, you can only transform elements:
Only transformable elements can be transformed. That is, all elements
whose layout is governed by the CSS box model except for: non-replaced
inline boxes, table-column boxes, and table-column-group boxes.
So, you can disable transform by just modifing display to a non-element one, I changed it to display:inline so the transform stops working:
.transition {
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.notransition {
display: inline;
}
Of course this will mess up with animation, however it's usefull when you are working with responsive CSS:
// small resolution / animation will stop working, and element will expand to the whole screen
.transition {
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.notransition {
display: inline;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
// medium resolution / animation works
#media print, screen and (min-width: 40em) {
.notransition {
-webkit-transform:unset;
transform:unset;
}
}
Related
I've been trying to teach myself some css animations with keyframes, and I'm trying to create something in which a small square drops down, then out of that square, a rentangle protrudes from the left, it then displays some text after 8 or so seconds and then the rentangle retreats back into the smaller square (to the right) and the smaller square retreats upwards into 'thin air'. If you're wondering what this is for it's an alert notification when someones follows me on Twitch TV while I livestream. Here is a JSFiddle of my efforts so far. For some reason on JSFiddle the content doesn't appear before the animation, however on the the alert service i use it does happen. I've linked their tester here, so you can see what I mean.
HTML CODE:
<html>
<head>
<title>GR412 Twitch Follower Alert</title>
<link href="Twitch\followeralert.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="follower-container">
<div class="left-square-container">
</div>
<div class="right-retangle-container">
<div class="header">
<span class='keyword name'>{name}</span> is now following you!
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slideInFromTheLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
#keyframes slideInFromBelow {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
#keyframes slideInFromTheRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 75px;
height: 75px;
background: #313131;
animation: 1s 1s 1 slideInFromAbove;
}
.right-retangle-container {
width: 500px;
height: 75px;
background: #212121;
animation: 1s 2s 1 slideInFromTheLeft;
}
.header {
font-size: 24px;
color: #ffffff;
text-align: center; /*vertical alignment of text*/
position: relative; /*horizontal alignment of text*/
top: 50%; /*horizontal alignment of text*/
transform: translateY(-50%); /*horizontal alignment of text*/
margin: 10px,
10px,
10px,
10px; /*GOT TO HERE, THIS COULD BE CAUSING TWITCHING*/
}
.keyword:not(.user_message) {
color: #0d47a1;
}
However there are some issues, first being that the content appears first, then does the animation. I would like it so you start with an empty screen and then the animation ensures that the square drops down first, then the rentangle protrudes from the square and finally the text is displayed. These three components should hold for 8 seconds then as already described another animation should hide each component in the order specified in the first paragraph.
The second issue is that when the rentangle protrudes, it doesn't do it from the right hand edge of the square, rather it does it from the left. So it overlaps the square, which ruins the effect.
I've based my code off this exsisting question:css3 transition animation on load?, which has helped a lot, but it doesn't help with my specifc needs.
Any help would be appreicated, and if something isn't clear let me know.
Note, if the second link doesn't work, let me know and i'll sort it.
Thanks, GR412.
Issue 1: You need to set the styles of the initial placement for the content.
Issue 2: position: relative; z-index: /*some value*/ So you can properly layer the content.
You also need to use animation-fill-mode: forwards
This sets the end styles to the end styles of #keyframes associate with it.
I've tweaked your timing. Here's a plnkr of it. Read the comments in the CSS
You end up having to calculate percentages. I would consider working out a calculation that can accept variables for scss/less/sass etc.
CSS comments:
/*
to calculate these percentages:
([seconds of portion of animation] x 100)/[total seconds of animation]
1) slideInFromAbove starts
2) slideInFromTheLeft starts
3) slideInFromTheLeft ends
4) slideInFromAbove ends
slideInFromAbove:
1) slide down
2) hold
2) slide up
slideInFromTheLeft:
1) slide right
2) hold
3) slide left
*/
I was trying to make a text box appear when I hovered over something different.
In my code: I want to hover over the h1 block and make the h3 block appear.
h1.title {
font-size: 100px;
background: url(https://upload.wikimedia.org/wikipedia/commons/f/f3/Orion_Nebula_-_Hubble_2006_mosaic_18000.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 5.6s ease, 3s transform;
}
h1.title:hover {
background-position: left;
transform: translateX(150px) /* Where the .ps would appear */
}
.ps {
visibility: hidden;
}
<div class="title">
<h1 class="title">Random Thing</h1>
<h3 class="ps">Playing around in HTML!</h3>
</div>
You can use the adjacent sibling combinator +:
https://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators
h1.title:hover + .ps {
visibility: visible;
}
First of all, comments in css are made by
/* text */
The answer to your question:
h1.title:hover + .ps {
display: block;
}
Don't use visibility styling because when I used it before it didn't work. And display is more common.
Hope this works!
You can also use
h1.title:hover + #ps {
opacity: 1;
}
Sometimes I can't use a dot when making code that represents an element with an id.
I have a wordpress website and I'd like to add some features that my current theme doesn't offer. I'd like the 3 images in the "Pages" section to reduce in size or switch to a different image (same content, smaller resolution) so as to appear smaller then you hover over it. I've managed to accomplish this with a custom HTML page, adding ID's to the images and then adding a version of this to my style.css for each image
#techbutton {
display: block;
width: 125px;
height: 125px;
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo21-e1445171629993.png") no-repeat 0 0;
}
#techbutton:hover {
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo2-hover-e1445296643552.png") no-repeat 0 0;
}
#techbutton span {
position: absolute;
top: -999em;
}
After uploading the custom HTML to my server I realised that instead of just overriding the homepage of rafsk.co.uk it also overrode the homepages of all my subdomains.
So how can I do this?
You could do this with a css transform, that would be the easiest way, and you can apply it to all three with a class instead of an id (which should only be used once per page):
So first give the same class to all of the images (meaning to the actual image tag, like <img class="imageclass" src="blah.png" />), and use this in your css:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
You could then add a css transition effect if you want it to be smoother:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
Here is a working example:
https://jsfiddle.net/f9teea7L/
ALTERNATIVE OPTION #1:
If you can't edit the HTML and can only get an image into the div through the background, you could try adding a background-size property like this. Be aware though that it won't work in IE 8 or lower:
#techbutton {
display: block;
background-image: url('http://vignette1.wikia.nocookie.net/deadliestfiction/images/d/d5/2138464123_1360632315.jpg/revision/latest?cb=20140513035922');
background-size: 100%,100%;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
#techbutton:hover {
transform: scale(0.9,0.9);
}
Working Example: https://jsfiddle.net/azx962a9/
ALTERNATIVE OPTION #2:
I've looked at your site though and if I'm understanding what you want to do, it seems to me that simply adding this to your css should work...:
.service-icon {
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.service-icon:hover {
transform: scale(0.9,0.9);
}
I have a large div with a small image inside of it. I want to make the image fade when I hover over the div, even when the mouse isn't directly over the image itself.
The div is much bigger than the image, so I'm not going to add transparency around the image or change the image size or anything like that.
I just want it to fade when the mouse hovers over the div it's in.
Here's the code I have so far, but it won't be useful:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
CSS
#left {
background-color: #f0f0ee;
float: left;
width: 50%;
min-height: 100%;
}
#logoLeft {
float: right;
margin-top: 2.5em;
}
I'd suggest:
#left:hover #logoLeft {
opacity: 0.4;
}
If you'd like a gradual fading:
#logoLeft {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
#left:hover #logoLeft {
opacity: 0.4;
transition: opacity 0.3s ease-in-out;
}
The below code would work if image.jpg is the regular image and faded.jpg contains a faded version of image.jpg that you photoshop.
<img src='image.jpg' onmouseover="this.src='faded.jpg';" onmouseout="this.src='image.jpg';">
You can do this one of two ways.
Use the general child selector: #left:hover #logoLeft which just says anything that is a child of #left:hover with an id of #left should have these rules applied.
User the direct descendant selector #left:hover > #logoLeft which says that any immediate child of #left:hover with id #left should have these rules applied.
Here is a more detailed description from Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
Also, the :hover sudo selector is what you would use for the mouse over property. MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
NOTE: Some older (outdated) versions of Internet Explorer only support the :hover sudo selector on anchor tags.
For the fading I'm guessing you just want to change the opacity of the image. To have full cross browser support I would recommend this page: http://css-tricks.com/snippets/css/cross-browser-opacity/
Which says the following:
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
Here is a working jsfiddle
Here is the Jquery Solution of this :
Css Part :
#left{
background-color: #f0f0ee;
float: left;
border:1px solid black;
width: 50%;
min-height: 100%;
}
#logoLeft {
float:right;
}
.fadeOut{
opacity:0;
transition: opacity 1s ease-in-out;
}
Js Part :
<script type="text/javascript">
$(document).ready(function(){
$("#left").on({
"mouseover" : function() {
$("#logoLeft").addClass("fadeOut");
},
"mouseout" : function() {
$("#logoLeft").removeClass("fadeOut");
}
});
});
</script>
HtML part:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
Here is the working example : http://jsbin.com/tijobudo/1/edit
How can I make my <div> elements grow (and the content changes text size to a higher one), when hovered over? I put them in a class and tried:
size: 150%;
and
height: +30px;
width: +30px;
the first try didn't work at all, and the second code just made the div's flash and dissappear partially.
CSS3 solution:
div {
background: #999;
width: 200px;
height: 20px;
transition: width 1s;
}
div:hover{
width: 300px;
}
<div>
<p>Im content</p>
</div>
http://jsfiddle.net/MrdvW/
I did something like this for a similar problem (you can change the scale to whatever works for you):
div:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}
Note that this will scale both the div and its content, which I think is what you want.
Using CSS you can add a hover style to the div:
div.container {
width: 80%;
background-color: blue;
}
div.container:hover {
width: 100%;
background-color: red;
}
See this jsFiddle for a demonstration.
jQuery Solution
Another option that might work for you is jQuery. It's a JavaScript library that simplifies commonly needed functionality such as this. Using jQuery, you can easily add hover effects to the elements:
//hover effect applies to any elements using the 'container' class
$(".container").hover(
function(){ //mouse over
$(this).width($(this).width() + 30);
},
function(){ //mouse out
$(this).width($(this).width() - 30);
}
);
See this jsFiddle for a demonstration.