I am trying to create a unique effect where a tile divides into two on hover, with each tile acting as an individual link. Additionally, I want the background color of the tiles to change on hover.
To achieve this, I have stacked two divs (toptile and bottomtile) on top of each other. On hover, toptile becomes invisible revealing bottomtile, which contains two divs with hyperlinks.
<div class="tile">
<div class="bottomtile">
<div class="linktile"><a href="page1.php">ONE</a></div>
<div class="linktile"><a href="page2.php">TWO</a></div>
</div>
<div class="toptile">HELLO</div>
</div>
The CSS:
.tile{
width: 200px;
height: 200px;
position: relative;
}
.bottomtile {
position: absolute;
width: 200px;
height: 200px;
}
.toptile {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.toptile:hover {
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
}
.linktile{
height: 95px;
width: 200px;
background-color: blue;
top: 0;
left: 0;
}
.linktile:hover{
background-color: yellow;
}
However, I am facing issues with the background change in `.linktile:hover` and the hyperlinks not working as intended. The links seem empty despite displaying the words ONE and TWO. It seems like `toptile` is creating a transparent barrier preventing me from reaching `bottomtile` with my mouse.
I have tried using `visibility: hidden` and `display: none` within the `.toptile:hover` but the problem persists. Is there a way to completely hide `toptile` on hover or any other workaround for this issue?