I am currently in the process of designing a website and have been exploring ways to implement a hover animation using CSS.
<html>
...
<body>
<div id ="outer_container">
<div id="inner_container">
<img id="imageOne"/>
</div>
</div>
...
</body>
<html>
The outer_container spans the entire width of the page
As for the inner_container, it is positioned within the outer_container and centered vertically.
In the CSS animation, there is a concealed element known as 'blur', which essentially functions as a colored block that matches the dimensions of the image. When hovered over, the "blur" appears on top of the <img/> tag located within the inner_container div.
However, due to using
"position : relative / position : absolute""blur" ends up overlapping with the image tag and disrupts the alignment achieved with display : inline-block between the inner_container and outer_container divs.
I am seeking an alternative solution that would enable the hidden element to be displayed on top of the <img/> tag in the inner_container without the need for
"position : relative / position : absolute"
This way, I can maintain the alignment of the inner_container inside the outer_container.
To view the actual code, you can visit this link