I'm encountering an issue with configuring an element to have absolute positioning and a width and height of 100% while setting its opacity to 1.0.
To summarize, here is the HTML code I am working with:
<ul class="properties">
<li style="width: 343px; height: 248px;">
<img src="<?php bloginfo('template_directory'); ?>/images/parallax/apartment2.png">
<div class="full">asd</div>
</li>
</ul>
And this is the corresponding CSS:
.properties {
list-style: none;
}
.properties li {
background-color: #efece9;
position: relative;
}
.properties li .full {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
opacity: 0;
/* transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out; */
}
.properties li:hover .properties li .full {
opacity: 1;
}
Despite my efforts, when I hover over the li element, the opacity of the "full" div does not change to 1 as intended. It remains unaffected by the hover action. However, if I set its initial opacity to 1, it functions correctly (covering the entire li with a white background).