Noob way of Life
New Coder
Hi everyone!
I have some issue with html/css. I want to make a gif covered with another static image. When you move the mouse over it the static image disappear reveling the gif and a clicckable button.I tried but the image for no reason the link became unclicckable (seems the static image(evem if not visible) is over.
I tried z-Index, Point Event and so on but I cannot resolve.
HTML
CSS
Something is fishy because if i order the class this way (first the gif, then the static img) the link become clicckable (the static image do not appear. Probably is beneath the gif).
I have some issue with html/css. I want to make a gif covered with another static image. When you move the mouse over it the static image disappear reveling the gif and a clicckable button.I tried but the image for no reason the link became unclicckable (seems the static image(evem if not visible) is over.
I tried z-Index, Point Event and so on but I cannot resolve.
HTML
Code:
<div class="portfolio-wrap">
<img src="Test.jpg" class="static">
<img src="Test.gif" class="img-fluid">
<div class="portfolio-info">
<h4>VIDEOMAKING</h4>
<div class="portfolio-links">
<a href="portfolio-test-1.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-info-circle"></i></a>
</div>
</div>
</div>CSS
Code:
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
background: rgba(69, 80, 91, 0.8);
box-shadow: 0px 0px 30px #000000c5;
}
.portfolio .portfolio-wrap .static {
position: absolute;
width: 100%;
height: auto;
background: white
}
.portfolio .portfolio-wrap .static:not(:hover){
opacity: 1;
transition-duration: 1s;
z-index: 4
}
.portfolio .portfolio-wrap .static:hover {
opacity: 0;
transition-duration: 1s;
z-index: 4
}
.portfolio .portfolio-wrap .portfolio-links {
text-align: center;
z-index: 9999;
}
.portfolio .portfolio-wrap .portfolio-links a {
color: #272928;
margin: 0 2px;
font-size: 28px;
display: inline-block;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a :hover {
color: #016748;
z-index: 9999;
}
.portfolio .portfolio-wrap .portfolio-info {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 3;
transition: all ease-in-out 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}Something is fishy because if i order the class this way (first the gif, then the static img) the link become clicckable (the static image do not appear. Probably is beneath the gif).
Code:
<div class="portfolio-wrap">
<img src="Test.gif" class="img-fluid">
<img src="Test..jpg" class="static">
<div class="portfolio-info">
<h4>App 1</h4>
<div class="portfolio-links">
<a href="portfolio-test-1.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-info-circle"></i></a>
</div>
</div>
</div>
