Flip Button Background Image Vertically - html

I'm using CSS to style my button which has a background Image. I need a press effect. so I tried flopping my button vertically when it is active, as demonstrated in the fiddle.
http://jsfiddle.net/krishnathota/xzBaZ/10/
I'm able to Flip the image but along with the whole button. How can I only flip the background Image. ??
I have to write in another class other than .button:active or what?? Plaease help
Please check the Third and Fourth buttons and flip the BackgroundImage. The Firse and second buttons contain a <img> I do not want it to be flipped.
if this is not cross browser supported, Can you tell me how to change the background when button is active without changing the background color?

Add active state only for image
.button:active img{
/*Vertical Flip background img*/
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv; /*IE*/
top: 1px; position: relative;
/*-webkit-transform: translateY(1px);-moz-transform: translateY(1px);*/
}
DEMO
Here is the best tutorial for flipping the elements separately
http://www.sitepoint.com/css3-transform-background-image/

Related

Rotating icon on hover

I am still learning web development and decided to test my skills by making the minecraft.net website again. On one of the links on the main page there is a dropdown menu with an arrow pointed down beside the link. On hover the dropdown menu comes down and the arrow points up. Does anyone know how to code this hover effect for the link and arrow. Also the arrow changes direction and the menu comes down wherever you hover over the link or the arrow beside it. Your help would be much appreciated. Thanks in advance.
img:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
If this arrow element (div, img etc) has a class e.g. "dropdown-arrow", you could do something like this:
.dropdown-arrow {
transform: rotate(0deg)
transition: transform 0.3s ease-in-out
}
.dropdown-arrow:hover {
transform: rotate(180deg)
}
Setting two transforms will ensure that when you are not hovering, it will return to its normal rotation. The transition will make this rotation smoother, not an instant change.
You can make an on hover event happen in CSS using the :hover psuedoselector. As for rotating your arrow, this using CSS' rotate() function will work:
#arrow:hover {
transform: rotate(180deg);
}
<div id="arrow">▼</div>

Two css hovering effects in one, how two effects are linked with each other?

How to make two css code linked with each other?
For example:
An icon which is flipping when hovering it but it is also slightly going up with its white background.
You can see in this website https://www.designhenge.com, on its home page services section. How both css are interconnected with each other? What is the code behind it?
I have already made the icon flipping hovering effect. But I don't know how the white background box is slightly going up along with flipping icon on it.
These are the elements in the designhenge website which have flipping icons with white background box going up with them when hovering it:
you have to use transform:translate property on the div hover section, they have used the code to do that
.info-card:hover {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
Try this below css:
.info-card:hover {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
You can also check like this:

Unhide a Div that's only being showed on hover state

I was trying to modify this card from a grid plugin for wordpress, and there's an element that previously was a "read more" anchor element, and trying to save some time i decide it to use it as the green button from the picture below, but the problem is that is only showed in a hover state.
The url is the following one: http://uai.compite.cl
Is there any way to apply a rule for the not hover div? i tried the :not(:hover) but it doesn't seem to work in this case.
Thank you for the help
a.tg-link-button {
opacity: 1 !important;
-webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-moz-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-ms-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-o-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
}
I just added !important so it overrides the regular setting.
If i understood correctly you need the hover effect to be on every news div visible without hovering.
Just add on your css
.quito .tg-light .tg-media-button,
.quito .tg-light .tg-link-button {
opacity:1;
}

<video> image feed is in mirror image, how to transform image to non-mirror image

functionality:
User to stand in front of camera and take a picture.
What has been done:
Made use of of a <video> to capture motion image and have created a "Take Picture" button to capture the image to impose a still image. Have also incorporated a Zoom feature as well.
Issue:
The image is mirrored. Therefore, when user moves left, the image in the video feed will move right and when user moves left, the image in the video feed will move right.
I have changed the following transform:rotateY(), however, it is still giving me the same functionality whereby when user moves left, the image in the camera feed moves right and vice versa. Hence, what have I done wrong and how do I rectify the following issue.
.camera_feed_flip {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
/* Safari and Chrome */
-moz-transform: rotateY(0deg);
/* Firefox */
transform: scale(1.0);
}
<div id="CameraFeed" align="center" style="position:absolute; widths:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=7; top:600px; left:0px; ">
<video id="video" width="1300px" height="1350" class="camera_feed_flip" style="position:absolute; z-index:16; top: 600px; left:-110px" autoplay></video>
</div>
I don't know about the transform css at all, but it strikes me that you are rotating the image by 0 degrees (and therefore not changing it at all) . Shouldn't it be by 180 degrees?
.camera_feed_flip {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
/* Safari and Chrome */
-moz-transform: rotateY(180deg);
/* Firefox */
transform: scale(1.0);
}
but then I have never used this css. I may not be accurate and therefore gvinig you an incorrect solution - sorry if that's the case :)

Safari CSS Transition flickering

I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems.
I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, transformX(). At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right
When I go back to the first element, the second element flickers, like rearranging its position.
.first-container.first-container1 {
background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
background-size: cover;
left: 0;
}
.first-container.first-container2 {
background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
background-size: cover;
left: 100%;
}
.bs-first .first1 .first-container.first-container2 {
-webkit-transform: translateX(-8.5%);
-moz-transform: translateX(-8.5%);
-o-transform: translateX(-8.5%);
-ms-transform: translateX(-8.5%);
transform: translateX(-8.5%);
}
.first2 .first-container.first-container1 {
-webkit-transform: translateX(8.5%);
-moz-transform: translateX(8.5%);
-o-transform: translateX(8.5%);
-ms-transform: translateX(8.5%);
transform: translateX(8.5%);
z-index: 9;
}
I could really use a few hints on how i could solve this. Thank you!
You can try -webkit-backface-visibility: hidden; applied to the element that has applied the css transform.
In your case if you are using background images that it won't work so just create a class and apply it like:
.stop-flickering {-webkit-transform:translate3d(0,0,0);}
Also you can try:
-webkit-transform-style: preserve-3d;
In my case none of these methods worked :
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
I had an animation on an empty div to create bouncing circle and the solution was to use pseudo element :before and the flicker disappeared