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>
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:
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;
}
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 :)
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