How can I make buttons unclickable until CSS transition is finished? - html

Question

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

Answer 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.

Answer 2

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