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'm designing a website in plain CSS and HTML, and I was trying to implement a transition similar to this one:
https://codepen.io/fox_hover/pen/wYrvod?editors=1100
My problem is on mobile devices : the link buttons (link and search) are clickable before they become visible, because the transition is simply making them opaque.
I have tried styling the buttons with display:none, pointer-event:none, or visibility: hidden, then making them clickable only once the box is :active or :hover; however it doesn't fix my problem.
While I know this can be easily fixed in Javascript, is there a way fixing the issue using only HTML and CSS (maybe by re-structuring/re-thinking my transition)? Thanks!
<div class="portfolio-item portfolio-effect__item portfolio-item--eff1">
<img class="portfolio-item__image" src=".." alt="Portfolio Item">
<div class="portfolio-item__info">
<div class="portfolio-item__links">
...
</div>
</div>
</div>
.portfolio-item--eff1 .portfolio-item__info {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0;
}
.portfolio-item--eff1:hover .portfolio-item__info {
transition-property: all;
transition-duration: 0.4s;
transition-timing-function: linear;
transition-delay: 0s;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
If you're trying to not use js then you may have to employ some sort of css-controlled veil.
If you can get a element to sit over the button (all clickable area, probably even at scale(1.1)) then you can likely set it up to 'uncover' when your other transition finishes. You could probably do this with a css animation, though I can't double check right now.
As a general thought, I'd personally think twice about actively stopping users from clicking CTAs due to animation. It's a sure fire way to get users to lose interest in a website when they have to start click buttons a second time after they thought they'd already click it.
If you need more to go on, or it doesn't work, then feel free to comment and try come back and update my answer.
Hope this helps.
I figured it out; I simply needed to add a delay when changing the visibility, using a CSS transition (with the same duration as the actual transition effect).
.portfolio-item--eff1:hover .portfolio-item__links {
visibility: visible;
transition: visibility 0ms 0.3s;
}
.portfolio-item__links{
visibility: hidden;
}
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;
}
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/
SOLVED - the problem is that doing a rotation puts half of the element behind the neutral (zero) Z-axis for the webpage, and WebKit apparently doesn't allow mouse events through that "neutral" plane. So changing the rotation point to the right/left edges of the panels solved it. Weird but for now it works.
I have a simple HTML5/CSS3 page with four panels. These panels use -webkit-transform to form them into a nice arrangement. On :hover, I use -webkit-transform to bring the panel up to the foreground. The code is below.
What happens is that the :hover action is unreliable. If I swipe the mouse over the panels, it's common to stop moving the mouse with it hovering over a panel but the panel is still in its original position. Specifically, swiping from left to right, the leftmost two panels appear to work fine, but the rightmost two don't scale up until the mouse is halfway across the panel.
What would cause this?
EDIT: Quick follow-up, it appears that links placed in the transformed elements will only be clickable on the leftmost (for the two left panels) or rightmost (for the two right panels) halves of the elements. In other words, the click zone is only active for the "closer" half of the element.
First, the HTML (minimal example):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
<article class="tr_left"></article>
<article class="tr_midleft"></article>
<article class="tr_midright"></article>
<article class="tr_right"></article>
</section>
</body>
</html>
And the CSS:
#test article {
display: inline-block;
height: 150px;
width: 160px;
background-color: blue;
-webkit-transition: -webkit-transform 0.2s ease;
}
#test article.tr_left {
-webkit-transform: perspective(400px) rotateY(20deg) scale(1);
}
#test article.tr_midleft {
-webkit-transform: perspective(400px) rotateY(8deg) scale(0.9);
}
#test article.tr_midright {
-webkit-transform: perspective(400px) rotateY(-8deg) scale(0.9);
}
#test article.tr_right {
-webkit-transform: perspective(400px) rotateY(-20deg) scale(1);
}
#test article:hover, #test article:active {
-webkit-transform: perspective(400px) scale(1.2);
}
Its seems to be a chrome bug, since if your remove the original perspective and only have it on the hover, it works perfect.
(ex http://jsfiddle.net/mMYrf/1/)
What you could do then to make it work, could be createing an outer container which fills the perspective area and on the hover, give the inner element the hover effect.
(ex. http://jsfiddle.net/mMYrf/2/)
Awesome effect btw :)
I had the same issue with only the top 50% of the link being hoverable and clickable, while the entire element was still visible. I fixed this by adding translateZ(1px) to my -webkit-transform. This brings the entire element in front of the Z-axis and makes it completely hoverable and clickable. There is however a 1px zoom with the translateZ, but it's unnoticeable. Until this issue is dealt with, this will have to do!