I want to make link(.fm) appearing while hovering the image, but my code isn't working (when i hover to the link it starts to appear and dissapear fast).this is the code. I tried usind z-index but it didn't worked , also tried changing positions , but without succes. Any tips please.can you please help me by typing a working code or correcting mine?
.fm a{
position:absolute;
display: none;
background-color: #5D5D5D;
color:pink;
padding:10px;
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
<a href="#" id="f1">Female</a>
</div>
</div>
The code is working , but it have lags while hovering the .fm link
This is another example but using javascript. This will help with your problem that link disappears so fast.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper {
width: 400px;
height: auto;
}
.fm {
position: absolute;
padding: 10px;
background-color: #5D5D5D;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: pink;
}
.caine1.fm {
display: block;
height: 250px;
width: 400px;
}
.link {
font-family: Verdana;
font-size: 16px;
color: crimson;
z-index: 1;
display: block;
width: 400px;
}
.hiddenLink {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="myImage" class="caine1">
<img id="img" src="1.png" width="400" height="250"></img>
<div id="link" class="hiddenLink"><a href="#" class="fm">This is my hidden link</a></div>
</div>
</div>
<script>
document.getElementById("myImage").addEventListener("mouseover", function() {
document.getElementById("link").className = "link";
});
document.getElementById("img").addEventListener("mouseleave", function() {
document.getElementById("link").className = "hiddenLink";
});
</script>
</body>
</html>Your using display none, and there is no transition animation on this component. Display none is binary, meaning there no way to animate this. Instead, use this:
.fm a{
position:absolute;
width: 0;
height: 0;
visibility: hidden;
opacity: 0;
background-color: #5D5D5D;
color:pink;
padding:10px;
transition: all 1s ease-out
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
width: 4rem;
height: 1.5rem;
font-size: 1rem;
visibility: visible;
opacity: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
<a href="#" id="f1">Female</a>
</div>
</div>